使用此

Question

我正在创建以下元素：

    .dh-tl-tl {}
    .dh-tl-tr {}
    .dh-tl-br {}
    .dh-tl-bl {}

    .dh-tr-tl {}
    ...

    .dh-br-tl {}
    ...

    .dh-bl-tl {}
    ...

有没有办法让CSS选择器获得每组中的4个项目？

e.g。

    [class=(?<=.dh-)(.*)(?=-bl)] {}

Answer 1

您可以使用^=（＆＃39;以＆＃39;开头）和$=（＆＃39;以＃39;结尾）属性选择器。

[class^="dh-"][class$="-bl"]{}

Answer 2

听起来您正在尝试选择类名以表达式开头的所有元素，并以另一个表达式结束。

有两个CSS选择器可用于此

[attribute*="value"] - 属性以选择器
[attribute$="value"] - 属性以选择器

[class^="dh-"][class$="-tl"] { color: red; }
[class^="dh"][class$="-tr"] { color: orange; }
[class^="dh"][class$="-bl"] { color: green; }
[class^="dh"][class$="-br"] { color: blue; }

<p class="dh-tl-tl">This is group 1, it is colored red</p>
<p class="dh-tl-tr">This is group 2, it is colored orange</p>
<p class="dh-tl-bl">This is group 3, it is colored green</p>
<p class="dh-tl-br">This is group 4, it is colored blue</p>

<p class="dh-tr-tl">This is group 1, it is colored red</p>
<p class="dh-tr-tr">This is group 2, it is colored orange</p>
<p class="dh-tr-bl">This is group 3, it is colored green</p>
<p class="dh-tr-br">This is group 4, it is colored blue</p>

<p class="dh-bl-tl">This is group 1, it is colored red</p>
<p class="dh-bl-tr">This is group 2, it is colored orange</p>
<p class="dh-bl-bl">This is group 3, it is colored green</p>
<p class="dh-bl-br">This is group 4, it is colored blue</p>

<p class="dh-br-tl">This is group 1, it is colored red</p>
<p class="dh-br-tr">This is group 2, it is colored orange</p>
<p class="dh-br-bl">This is group 3, it is colored green</p>
<p class="dh-br-br">This is group 4, it is colored blue</p>

http://www.w3schools.com/cssref/sel_attr_begin.asp

Answer 3

使用此

如果像div这样的元素然后使用和类开始'dh-'，你可以使用。

div[class*='dh-']

CSS选择器正则表达式介于两者之间

3 个答案:

使用此