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

Question

我正在努力解决 textarea 和 wysihtml 遇到的问题。

目前我有这样的东西

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

我有一些 CSS 看起来像这样

.wysi-fix{
 //some css here
}

.wysi-fix CSS 适用于文本区域，但是如果我将文本区域更改为...

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

然后我将 CSS 更改为

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

CSS 不再有效，即使两个选择器都在 HTML 页面上选择相同的元素。如果有帮助，我正在使用 SASS 而不是 vanilla CSS。知道发生了什么事吗？

Answer 1

According to MDN，您的属性选择器应该可以使用。

可能您必须使用 [required="required"] 作为属性选择器，并带有像 <textarea class="wysihtml" required="required"></textarea>:

这样的标记

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

但更好的方法是使用 :required 伪 class:

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

Answer 2

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