Question

我遇到了一些CSS wordpres样式。我想对这一段进行设计，但我怎样才能选择前两个＆＃34; li＆＃34; （功能，featured2）？

<div class="categories-wrp" data-type="cliparts">
<ul class="smooth">
<li data-act"item" data-id="{featured}"></li>
<li data-act"item" data-id="{featured2}"></li>
<li data-act"item" data-id="110"></li>
<li data-act"item" data-id="111"></li>
</ul>
</div>

感谢您的帮助！

Answer 1

两个选项：1。first-child和nth-child(2)。 2.按属性选择器[data-id="{featured}"]

li {
  display: block;
  height: 5px;
  margin-bottom: 1px;
  background-color: #ddd;
}

.o1 li:first-child,
.o1 li:nth-child(2) {
  background-color: blue;
}


.o2 li[data-id="{featured}"],
.o2 li[data-id="{featured2}"] {
  background-color: blue;
}

<div class="categories-wrp o1" data-type="cliparts">
  <ul class="smooth">
    <li data-act"item" data-id="{featured}"></li>
    <li data-act"item" data-id="{featured2}"></li>
    <li data-act"item" data-id="110"></li>
    <li data-act"item" data-id="111"></li>
  </ul>
</div>

<div class="categories-wrp o2" data-type="cliparts">
  <ul class="smooth">
    <li data-act"item" data-id="{featured}"></li>
    <li data-act"item" data-id="110"></li>
    <li data-act"item" data-id="{featured2}"></li>
    <li data-act"item" data-id="111"></li>
  </ul>
</div>

Answer 2

您可以使用nth-child：

使用以下解决方案

＆＃13;

ul.smooth li:nth-child(1), 
ul.smooth li:nth-child(2) {
  color:red;
}

＆＃13;

<div class="categories-wrp" data-type="cliparts">
  <ul class="smooth">
    <li data-act"item" data-id="{featured}">Test</li>
    <li data-act"item" data-id="{featured2}">Test</li>
    <li data-act"item" data-id="110">Test</li>
    <li data-act"item" data-id="111">Test</li>
  </ul>
</div>

＆＃13;

如果您要格式化所有精选<li>元素，您还可以使用attribute selectors使用以下解决方案：

＆＃13;

ul.smooth li[data-id*="featured"] {
  color:red;
}

＆＃13;

<div class="categories-wrp" data-type="cliparts">
  <ul class="smooth">
    <li data-act"item" data-id="{featured}">Test</li>
    <li data-act"item" data-id="{featured2}">Test</li>
    <li data-act"item" data-id="110">Test</li>
    <li data-act"item" data-id="111">Test</li>
  </ul>
</div>

<div class="categories-wrp" data-type="cliparts">
  <ul class="smooth">
    <li data-act"item" data-id="{featured}">Test</li>
    <li data-act"item" data-id="110">Test</li>
    <li data-act"item" data-id="{featured2}">Test</li>
    <li data-act"item" data-id="{featured3}">Test</li>
    <li data-act"item" data-id="111">Test</li>
  </ul>
</div>

＆＃13;

注意：仅当{featured}和{featured2}未被模板引擎（如Smarty或Blade）替换时，此功能才有效。

Answer 3

尝试

.smooth ul li:nth-child(-n+2){
    color: red;
}

查看这个网站，如果不能解决这个问题可能会有用： :nth child recipes

:nth child tester.

使用css仅选择表中的特定元素

3 个答案: