Question

在我的css文件中，我已将before应用于<li>元素：

li:before {
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 font-size: 25px;
 margin-left: 65px;
 width: 0;
 left: -1em;
 top: 0.8em;
 position: relative;
}

问题是，一旦它包含在我的css文件中，我的导航标签还包含这个符号，如：

<ul class="nav nav-tabs">
   <li class="active"><a href="#t1" data-toggle="tab" >ABCD</a></li>
   <li><a href="#t2" data-toggle="tab">XYZ</a></li>
</ul>

如何解决这个问题？

Answer 1

您可以像这样覆盖它们：

.nav li:before {
   display: none;
}

Answer 2

li.YOURCLASS:before {
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 font-size: 25px;
 margin-left: 65px;
 width: 0;
 left: -1em;
 top: 0.8em;
 position: relative;
}

或类似的东西：

li:first-child:before {
content: none;
}

这将禁用第一个列表项的所有pseude元素。

Answer 3

您可以尝试这样..如果您只想应用Class_name

的样式

<强> CSS

Class_name:before {
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 font-size: 25px;
 position: relative;
}

Answer 4

你可以替换下面的css代码，这样它就会把箭头图像只放在第一个li（列表项）

li:first-child:before {
 content: "";
 border-color: transparent #111;
 border-style: solid;
 border-width: 0.35em 0 0.35em 0.45em;
 display: block;
 font-size: 25px;
 margin-left: 65px;
 width: 0;
 left: -1em;
 top: 0.8em;
 position: relative;
}

如何阻止某些css应用于所有<li>标签

4 个答案: