css复合选择器是什么?-tutorial css-php.cn

css复合选择器是什么?

css复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，目的是为了可以选择更准确更精细的目标元素标签。

CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，

以上具体的使用如下：

1、子选择器，代码如下:

<style type="text/css">
#pic>img{ // 使用 > 号，让选择器只选择直接的子类，width:200px;
height:200px;
}
</style>
<div id="pic">
<img src="1.jpg" alt="photo" />
<span><img src="btn" alt="点击大图" /></span>
</div>

Salin selepas log masuk

2、相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

Salin selepas log masuk

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

3、包含选择器

代码如下:

#header p{font-size:14px}
#main p {font-size:12}

Salin selepas log masuk

定义

包含框里的段落字体大小为14像素
定义

包含框里的段落字体大小为12像素.

4、多层选择器嵌套

代码如下:

#wrap #header h2 span {font-size:24px}
#wrap #main h2 span {font-size:14px}

Salin selepas log masuk

5、属性选择器

（1）匹配属性名选择器

div[class] {font-size:24px;}

Salin selepas log masuk

使该选择器能够匹配div中设置了class属性的对象定义格式

（2)匹配属性值选择器

img[alt="图像"][title="图像"] {border：solid 2px red}：

Salin selepas log masuk

给定义样式

(3)模糊匹配属性值选择器

6、伪选择器和伪元素选择器

<style type ="text/css">
a:link{color:#FF0000} /*正常链接状态下样式*/
a:visited{color:#0000FF} /*被访问之后的样式*/
a:hover{color:#00FF00} /*鼠标经过的样式*/
a:active{color:#FF00FF} /*超链接被激活的样式*/
</style>

Salin selepas log masuk

Atas ialah kandungan terperinci css复合选择器是什么?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css复合选择器

sumber：php.cn

Artikel sebelumnya：css的盒子模型是什么？ Artikel seterusnya：css中类选择符用什么表示?

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang