css选择具有由外部样式表设置的样式规则的元素

Question

With css you can use

    [style="cursor:pointer"] {cursor:wait;}

but this only works if the style rule in set inline. I want to do this when the style rule is set by an external style sheet.

here is a heavily commented codepen example. Thanks guys.

Edit: It is important to know that I can not edit the html or the external stylesheet(The first style rule in my example) I can only inject a stylesheet.

Answer 1

Your code above works as expected, due to the fact that changes to elements through CSS don't actually 'manipulate' the elements themselves, but rather their appearance. Essentially, CSS attributes only look at the DOM. Let me break it down for you:

You have two elements on the page, both <input> . The first input is styled inline with style="cursor:pointer" . You then have the following two components of CSS:

div [type="button"] {
  cursor: pointer;
}

[style="cursor:pointer"] {
  cursor: wait !important;
}

The first input skips over the first rule, as it is not inside a <div> . it then has the second rule applied, as it is styled as a pointer cursor on page load (because it is inline).

The second element applies the first rule, as it is inside a <div> . You might expect that due to CSS reading from top-to-bottom, that it would apply the second rule as well. This is not the case, as the CSS cursor attribute change is applied through a CSS rule , and is not present on page load. Thus, when the CSS file is loaded, it still reads it as a regular cursor, rather than a pointer cursor.

If you change the second style to:

input {
  cursor: wait !important;
}

You will see the second element correctly apply the wait cursor. This is because the second element was already an input when the CSS rules started to apply.

If you'd like to style a certain group of buttons with the wait cursor, while excluding other buttons, the best way to handle this is with a class :

.wait {
  cursor: wait;
}

<input type="button" class="wait">

Hope this helps! :)