CSS Direct Decedent李
在CSS中我将如何更改悬停测试1的颜色,但不是列表1,2,3的颜色?CSS Direct Decedent李
<ul>
<li>
test 1
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
的一个方法是指定的“默认”颜色:
li:hover {
color:#f00;
}
li, li:hover li {
color:#000;
}
另一个(作弊?)是使用多个标记来包装你想风格上悬停的内容:
li:hover span {
color:#f00;
}
<ul>
<li>
<span>test 1</span>
<ul>
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
</ul>
</li>
</ul>
我不认为这是作弊,我认为它是*理智*。 – 2012-08-07 23:17:36
我也认为'span'方法是最好的答案,它有最清晰的代码。 – insertusernamehere 2012-08-07 23:23:47
很多人不喜欢(ab)为这样的东西使用泛型标签,我想我主要是迎合这些人(它确实会给HTML添加无意义的大量/混乱)。另一个缺点是,改变标记并不总是一种选择。然而,在现实世界中,我可能会这样做,但第一种选择可能是最优雅和最不整体的代码。问题在于你需要*知道*使用什么颜色,并且不能继承它。 – 2012-08-07 23:31:39
这是一条路可走:
ul > li {
color: red;
}
ul > li:hover {
color: blue;
}
ul > li:hover > ul > li {
color: red;
}
你其实不*那么多:http://jsfiddle.net/hhauf/2/ – 2012-08-07 23:10:44
是的,你可以摆脱子选择器,并使用更通用的descanted选择器。但子选择器可能比descanted选择器更快:http://*.com/a/1182223/1456376 – insertusernamehere 2012-08-07 23:19:02
添加test1
成div
元素,使其在一个单独的一页。
CSS:
div:hover {
color: blue;
}
虽然可能有办法做到这一点不modifiying的HTML ..
给它自己的类,并在你的CSS文件中定义它。
<li class="yourclass">
或者把它标记,并定义链接在你的CSS
li.yourclass a:hover {
text-decoration: underline ;
}
一些线索:http://jsfiddle.net/hhauf/ – 2012-08-07 23:06:55
这其实是一个很好的问题,但魔鬼的在细节中。一般的答案会有所帮助,但为了达到最佳效果,您必须根据您的标记是什么*确切*您想要发生的事情来排除故障。因为风格是继承的,所以我没有意识到有什么灵丹妙药。 (我假设这个标记和你说的目标仅仅是为了举例的目的) – 2012-08-07 23:14:03
请记住,由于'test 1'不在与该文本的父'li'元素中包含的'ul'分离的后代元素中,所以必须在':hover'上“返回”子元素的'color'定义。换句话说,它不是那么干净。但是,你可以这样做:http://jsfiddle.net/hhauf/3/如果这就是你想要的,那么它会更干净。 – 2012-08-07 23:14:32