在CSS中什么是派生选择器？

oycnight 2005-08-24 03:35:00

派生选择器
可以使用派生选择器给一个元素里的子元素定义样式，例如这样：
li strong {font-style:italic;font-weight:normal;}
就是给li下面的子元素strong定义一个斜体不加粗的样式。

用百度一搜全部都是这个例子，这个例子我看不太明白，我只知道C++中的派生类可以继承父类的特性。请各位详细讲解，谢谢！

...全文

1174 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

BlueDestiny 2005-10-18

打赏
举报

再举个例子：

<style>
li { font-weight:bold; }
.redColor { color:red; }
</style>
<body>
<li>li font</li>
<li class="redColor">redcolor class font</li>
</body>

cn_apple 2005-10-18

打赏
举报

使用时要考虑兼容性。

BlueDestiny 2005-10-17

打赏
举报

and more...

http://www.w3cn.org/article/translate/2005/104.html

BlueDestiny 2005-10-17

打赏
举报

九.使用子选择器(descendant selectors)
CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码：

<div id="subnav">
<ul>
<li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
<li class="subnavitemselected"> <a href="#" class="subnavitemselected"> Item 1</a> </li>
<li class="subnavitem"> <a href="#" class="subnavitem"> Item 1</a> </li>
</ul>
</div>
这段代码的CSS定义是：

div#subnav ul { /* Some styling */ }
div#subnav ul li.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
div#subnav ul li.subnavitemselected { /* Some styling */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }
你可以用下面的方法替代上面的代码

<ul id="subnav">
<li> <a href="#"> Item 1</a> </li>
<li class="sel"> <a href="#"> Item 1</a> </li>
<li> <a href="#"> Item 1</a> </li>
</ul>
样式定义是：

#subnav { /* Some styling */ }
#subnav li { /* Some styling */ }
#subnav a { /* Some styling */ }
#subnav .sel { /* Some styling */ }
#subnav .sel a { /* Some styling */ }
用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。