I thought something like:
我想类似:
#list li > a {
font-weight: bold;
}
But this applies to every LI anchor I want only the top level items to be boldified not nested LI's in LI's -- if this makes any sense?? :)
但这适用于我想要的每一个LI锚,我只希望顶部的项目是粗体的,而不是嵌套在LI's里——如果这有意义的话?:)
EDIT |
编辑|
<ul id="list">
<li><a href="#">A</a>
<ul>
<li><a href="#">B</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">E</a></li>
</ul>
</li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
</ul>
3 个解决方案
#1
1
You need to add a bit more specificity to your selector:
您需要为您的选择器添加更多的特性:
#list > li > a
#列出> li > a
This targets any a
that is a direct descendent of an li
that is a direct descendent of #list
(which I'm assuming is the outer ul
, even though that's not specified in your example).
它针对的是li的直接后代,而li是#list的直接后代(我假设它是外部ul,尽管在您的示例中没有指定)。
You can see it in action at http://jsbin.com/segig/1/edit?css,output.
您可以在http://jsbin.com/segig/1/edit?
No extra markup or rules necessary, which makes this a pretty clean solution.
不需要额外的标记或规则,因此这是一个非常干净的解决方案。
#2
1
I don't think you can stop the cascading effect of the css, so you'd have to specify the class as you go along. Fiddle Demo
我认为您不能停止css的级联效果,因此您必须在进行时指定类。小提琴演示
HTML:
HTML:
<ul class="first">
<li><a href="#">A</a>
<ul class="innerfirst">
<li><a href="#">B</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">E</a></li>
</ul>
</li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
</ul>
CSS:
CSS:
.first {
font-weight: bold;
}
.innerfirst {
font-weight: normal;
}
#3
1
This can be done using CSS
The concept you are looking for is called pseudo element or CSS selectors
您正在寻找的概念称为pseudo元素或CSS选择器。
- Try using
first-line
instead offirst-child
- 试着用第一行而不是第一个孩子
ANSWER:
JSBIN
http://jsbin.com/dogol/1/editHTML
HTML
<html>
<body>
<ul>
<li class="ml"><a href="#">A</a>
<ul>
<li><a href="#">B</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">E</a></li>
</ul>
</li>
<li class="ml"><a href="#">F</a></li>
<li class="ml"><a href="#">G</a></li>
<li class="ml" ><a href="#">H</a></li>
</ul>
</body>
</html>
CSS
CSS
.ml:first-line
{
font-weight: bold;
}
#1
1
You need to add a bit more specificity to your selector:
您需要为您的选择器添加更多的特性:
#list > li > a
#列出> li > a
This targets any a
that is a direct descendent of an li
that is a direct descendent of #list
(which I'm assuming is the outer ul
, even though that's not specified in your example).
它针对的是li的直接后代,而li是#list的直接后代(我假设它是外部ul,尽管在您的示例中没有指定)。
You can see it in action at http://jsbin.com/segig/1/edit?css,output.
您可以在http://jsbin.com/segig/1/edit?
No extra markup or rules necessary, which makes this a pretty clean solution.
不需要额外的标记或规则,因此这是一个非常干净的解决方案。
#2
1
I don't think you can stop the cascading effect of the css, so you'd have to specify the class as you go along. Fiddle Demo
我认为您不能停止css的级联效果,因此您必须在进行时指定类。小提琴演示
HTML:
HTML:
<ul class="first">
<li><a href="#">A</a>
<ul class="innerfirst">
<li><a href="#">B</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">E</a></li>
</ul>
</li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
</ul>
CSS:
CSS:
.first {
font-weight: bold;
}
.innerfirst {
font-weight: normal;
}
#3
1
This can be done using CSS
The concept you are looking for is called pseudo element or CSS selectors
您正在寻找的概念称为pseudo元素或CSS选择器。
- Try using
first-line
instead offirst-child
- 试着用第一行而不是第一个孩子
ANSWER:
JSBIN
http://jsbin.com/dogol/1/editHTML
HTML
<html>
<body>
<ul>
<li class="ml"><a href="#">A</a>
<ul>
<li><a href="#">B</a>
<ul>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</li>
<li><a href="#">E</a></li>
</ul>
</li>
<li class="ml"><a href="#">F</a></li>
<li class="ml"><a href="#">G</a></li>
<li class="ml" ><a href="#">H</a></li>
</ul>
</body>
</html>
CSS
CSS
.ml:first-line
{
font-weight: bold;
}