Question

如何编写一个css-selection来选择一个元素（[myattr = a] || [myattr = b]）＆amp;＆amp; [secondattr = s]在单行中？

6.3.1节末尾。在https://www.w3.org/TR/css3-selectors/#attribute-representation，它说

以下选择器表示DIALOGUE元素，只要它具有属性字符的两个不同值之一：

DIALOGUE [character = romeo]
DIALOGUE [character = juliet]

我没有让它工作，只是。是否有可能只用一个班轮？

编辑：
选择：

<div class="parentclass"><div class="another" myattr="a" secondattr="s"></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr="s"></div></div>

但不是：

<div class="parentclass"><div class="another" myattr="a" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="z" secondattr="s"></div></div>

优先考虑单行，因为parentclass和another实际上要长得多，我需要在5种不同种类的secondattr上使用它，从s到w。

Answer 1

选择一个元素（[myattr = a] || [myattr = b]）＆amp;＆amp; [secondattr = s]在单行中，唯一可能的语法是

element[myattr='a'][secondattr='s'], element[myattr='b'][secondattr='s'] {..}

要解决以后的编辑问题，选择器将是

div.parentclass div.another[myattr='a'][secondattr='s'],
div.parentclass div.another[myattr='b'][secondattr='s'] {..}

例如，

div {
  height: 1em; border: 1px solid;
}

div.parentclass div.another[myattr='a'][secondattr='s'],
div.parentclass div.another[myattr='b'][secondattr='s'] {
  background: green;
}

to select:

<div class="parentclass"><div class="another" myattr="a" secondattr="s"></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr="s"></div></div>

but not:

<div class="parentclass"><div class="another" myattr="a" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="b" secondattr=""></div></div>
<div class="parentclass"><div class="another" myattr="z" secondattr="s"></div></div>

虽然我必须说myattr和secondattr不允许作为属性名称，因此不建议在实际的生产环境中使用它。请改用data-...属性。

注意：如果您认为这有点长，并且您需要为属性定位更多值，则可以使用SCSS之类的预处理器，它允许您编写

div.parentclass div.another[secondattr='s'] {
  &[myattr='a'], &[myattr='b'] {..}
}

所以你不必重复自己。

Answer 2

正如我在上面评论的那样，你是如何做到的：

/* Select element where (a=='1' || a=='2') && b==2 
   which also is  (a==1 && b==2) || (a==2 && b==2)
*/

.container div[a='1'][b='2'],  /*(a==1 && b==2)*/
.container div[a='2'][b='2']   /*(a==2 && b==2)*/
{
  color:red;
}

<div class="container">
  <div a='1' b='2'>a</div>
  <div a='2' b='2'>b</div>
  <div a='3' b='3'>c</div>
  <div a='1' b='2'>d</div>
  <div a='4' b='3'>e</div>
</div>

<强>更新

与您编辑的代码的逻辑相同：

.parentclass .another[myattr=a][secondattr=s],.parentclass .another[myattr=b][secondattr=s] {
  color:red;
}

<div class="parentclass">
  <div class="another" myattr="a" secondattr="s">a</div>
</div>
<div class="parentclass">
  <div class="another" myattr="b" secondattr="s">b</div>
</div>
<div class="parentclass">
  <div class="another" myattr="a" secondattr="">c</div>
</div>
<div class="parentclass">
  <div class="another" myattr="b" secondattr="">d</div>
</div>
<div class="parentclass">
  <div class="another" myattr="z" secondattr="s">e</div>
</div>

如何编写一个css-selection来选择一个元素（[myattr = a] || [myattr = b]）＆amp;＆amp;单行中的[secondattr = s]？

2 个答案: