使用不同的选择器时，工作CSS不适用于元素吗？

Question

I am working on fixing an issue I am seeing with a textarea and wysihtml .

Currently I have something like this

<textarea class="wysihtml wysi-fix" required></textarea>

I have some CSS that looks like this

.wysi-fix{
 //some css here
}

The .wysi-fix CSS works on the textarea, however if I change the textarea to...

<textarea class="wysihtml" required></textarea>

and I change the CSS to

.wysihtml[required]{
 //the css goes here
}

The CSS no longer works, even though both selectors are selecting the same element on the HTML page. If it helps, I am using SASS instead of vanilla CSS. Any idea as to what is going on?

Answer 1

According to MDN , your attribute selector should work.

Possibly you have to use [required="required"] as attribute selector with a markup like <textarea class="wysihtml" required="required"></textarea> :

.wysihtml[required="required"]{
  //the css goes here
}

But a better way would be to use the :required pseudo class:

.wysihtml:required{
  //the css goes here
}

Answer 2

试试.wysihtml:required而不是.wysihtml[required]