Question

我一直在努力让horus弄清楚我制作的网页存在的问题，并且我已经将其缩小到与多个类有关的事情，并且我已经做了一个小提琴来证明。

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; }
}

小提琴：https://jsfiddle.net/4w9L16g3/

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

Answer 1

您使用的语法看起来很奇怪。这有效：

@media (max-width:767px){
  .bg-yellow-on-mobile { background: yellow; }
  .talign-right-on-mobile { text-align: right; }
}

Answer 2

你需要使用 * caractere来选择类名，它在属性或部分属性中是什么

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

6.3.2子串匹配属性选择器

三种不同的属性选择器也可用于将模式表示为属性值：

[ATT ^ = “VAL”]

表示att属性，其值以前缀“val”
开头
[ATT $ = IDENT]

表示att属性，其值以后缀“ident”
结尾
[ATT * = “VAL”]

表示att属性，其值至少包含一次子字符串“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>

Answer 3

这是class属性的严格等于。只需使用.classname

即可

Answer 4

未应用第二条规则的原因是您正在使用具有[att=val]语法的属性选择器。根据{{3}}，当＆＃39; s＆＃34; att＆＃34;属性值完全＆＃34; val＆＃34;。＆＃39;

由于您的第二个<p>有多个类，因此不会将其视为完全匹配，并且不会应用text-align: right样式。

如果您的目标电子邮件客户端不支持.classname，最好的方法是使用[att~=val]语法，即[class~="talign-right-on-mobile"]。这会将元素＆＃39;与att属性相匹配，该属性的值是以空格分隔的单词列表，其中一个是＆＃34; val＆＃34;＆＃39; ，等等它拿起第二个<p>。现在总是：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

4 个答案: