html - 媒体查询选择器元素的多个类有什么问题？或者这里发生了什么？

Question

我一直在尝试让 horus 找出我制作的网页的问题，我已经将其缩小到与多个类有关的问题，并且我已经制作了一个 fiddle 来证明。

HTML:

<p class="bg-yellow-on-mobile">
  Should have a yellow background on mobile
</p>
<p class="bg-yellow-on-mobile talign-right-on-mobile">
  Should have a yellow background and text aligned right on mobile
</p>

CSS:

@media (max-width:767px){
  [class="bg-yellow-on-mobile"] { background: yellow; }
  [class="talign-right-on-mobile"] { text-align: right; }
}

fiddle :https://jsfiddle.net/4w9L16g3/

您会看到移动样式未应用于第二个 <p>标记，具有两个类的标记。是因为它有多个类的原因吗？

Answer 1

你需要使用 * 字符来选择类名，它正是属性中的内容或它的一部分

https://www.w3.org/TR/2001/WD-css3-selectors-20010126/#attribute-selectors

6.3.2 Substring matching attribute selectors

Three different attribute selectors are also available for pattern representation into the value of an attribute :

[att^="val"]

Represents the att attribute, its value beginning exactly with the prefix "val"

[att$=ident]

Represents the att attribute, its value ending exactly with the suffix "ident"

[att*="val"]

Represents the att attribute, its value containing at least once the substring "val"

@media (max-width:767px){
  [class*="bg-yellow-on-mobile"] { background: yellow; }
  [class*="talign-right-on-mobile"] { text-align: right; }
}

<p class="bg-yellow-on-mobile">
  Should have a yellow background on mobile
</p>
<p class="bg-yellow-on-mobile talign-right-on-mobile">
  Should have a yellow background and text aligned right on mobile
</p>