html选择器 并列,CSS 中的选择器 （二）- 组合选择器

CSS中组合选择器，算是基础选择器的升级版，

也就是组合去使用基础选择器的意思，因为配合一些 CSS 的专有语法，所以初学者比较难看懂，

下面枚举几个常用的选择器作为例子，略谈一下CSS的组合选择器的使用。

最近要整理一下之前打算写的系列文章，所以这篇算是书接上文了，

没有 CSS 基础选择器也就不会有组合选择器，

首先这个概念要明白，没人能够一步登天，要想飞你就得好好学走，

所以推荐大家基础一定要扎实的去学。

这里有张表格，算是以下例子的索引：

组合选择器列表

选择器

含义

示例

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

div,p { color:red; }

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

#nav li { display:inline; }

li a { font-weight:bold; }

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

div > strong { color:#f00; }

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

p + p { color:#f00; }

多元素并列选择器

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

//css 代码：

div.mydivred,p.mypred{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

//html 代码

div.mydivred

p.mypred

//css 代码：

div.mydivred,p.mypred{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

//html 代码

div.mydivred

p.mypred

效果：

div.mydivred

p.mypred

后代选择器

#fuji .ziji{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

div.ziji

#fuji .ziji{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

div.ziji

效果：

div.ziji

子元素选择器

#zys>span {

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

div.ziji

#zys>span {

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

div.ziji

效果：

因为span不是块级元素，所以比较窄。

#zys>span

毗邻元素选择器

//因为怕影响页面其他位置的样式

//所以在前面加了一个#pl限定选择，不明白的童鞋可以看本页例一

#pl p+p{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

p1

p2

//因为怕影响页面其他位置的样式

//所以在前面加了一个#pl限定选择，不明白的童鞋可以看本页例一

#pl p+p{

padding:10px;

background-color:#ffffff;

border:1px #000000 solid;

color:red;

}

p1

p2

p1

p2

总结

才疏学浅，尤其是在文笔方面，

本人已经尽力使用最简单的例子，

使用尽量详细的言语去解释了,

如果还是看不懂，那只好自求多福了。

本文算是续写 CSS 中的选择器 (一),

如果你在基本选择器上有何疑问可以参考此文。