CSS 中的选择器 (二)- 组合选择器

评论(4)

CSS组合选择器,算是基础选择器的升级版,
也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂,
下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的使用。

最近要整理一下之前打算写的系列文章,所以这篇算是书接上文了,
没有 CSS 基础选择器也就不会有组合选择器,
首先这个概念要明白,没人能够一步登天,要想飞你就得好好学走,
所以推荐大家基础一定要扎实的去学。
这里有张表格,算是以下例子的索引:

组合选择器列表

选择器

含义

示例

A,B

多个元素选择,同时匹配所有A元素和B元素,A和B之间用逗号分隔

div,p { color:red; }

A B

后代元素选择器,匹配所有属于A元素后代的B元素,A和B之间用空格分隔

#nav li { display:inline; }

li a { font-weight:bold; }

A > B

子元素选择器,匹配所有A元素的子元素B

div > strong { color:#f00; }

A + B

毗邻元素选择器,匹配所有紧随A元素之后的同级元素B

p + p { color:#f00; }

多元素并列选择器

并列是我取的名字,意思就是用逗号分开的选择器都有效。

//css 代码:
<style>
div.mydivred,p.mypred{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
</style>
//html 代码
<div class="mydivred"> div.mydivred</div>
<p class="mypred"> p.mypred</p>

效果:




div.mydivred

p.mypred

后代选择器

<style>
#fuji .ziji{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
</style>
 
<div id="fuji"><div class="ziji"> div.ziji</div></div>

效果:



div.ziji

子元素选择器

<style>
#zys>span {
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
</style>
<div id="zys"><span class="any"> div.ziji</span></div>

效果:
因为span不是块级元素,所以比较窄。


#zys>span

毗邻元素选择器

<style>
//因为怕影响页面其他位置的样式
//所以在前面加了一个#pl限定选择,不明白的童鞋可以看本页例一
#pl p+p{
padding:10px;
background-color:#ffffff;
border:1px #000000 solid;
color:red;
}
</style>
 
<div id="pl">
  <p>p1</p>
  <p>p2</p>
</div>


p1

p2

总结

才疏学浅,尤其是在文笔方面,
本人已经尽力使用最简单的例子,
使用尽量详细的言语去解释了,
如果还是看不懂,那只好自求多福了。
本文算是续写 CSS 中的选择器 (一),
如果你在基本选择器上有何疑问可以参考此文。





  1. @assassin
    E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

    这样说会不会更清晰些?

  2. #pl p + p 这个顺序是从左向右的吧?#pl p这个拿到的不是所有的p吗?怎么会选择第二个?

  3. Pingback: CSS 属性选择器 (CSS 2.1)|Css-网络编程

  4. Pingback: CSS 中的选择器 (一)|Css-网络编程