css复合选择器有哪四种,CSS复合选择器

CSS复合选择器

1. 后代选择器(包含选择器)

可以选择父元素里面的子元素。

/*表示选择元素1里面的所有元素2*/

元素1 元素2 {样式声明}

eg.

/*选择ol里面所有的li标签元素改为蓝色*/

ol li {

color: blue;

}

注：

元素1和元素2 中间用空格隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2只要是元素1的后代即可

针对最后一条写一个例子。

3. 我想变成蓝色

/*CSS样式的后代选择器写为如下*/

.demo li span {

color: blue;

}

2. 子元素选择器(子选择器)

只能选择某元素的最近一级子元素(只选择儿子，不选择其余后代)。

/*表示选择元素1里面的所有直接后代(子元素)元素2*/

元素1>元素2 {样式声明}

eg.

我是儿子1

我是孙子1

我是儿子2

我是孙子2

/*选择div里面所有最近一级p标签元素,字体大小改为12px*/

/*选中的是儿子*/

div > p {

font-size: 12px;

}

注：

元素1和元素2中间用“>”隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，与剩余后代无关

3. 并集选择器

可以选择多组标签，同时为它们定义相同的样式。

通常用于集体声明。

/*表示选择元素1和元素2*/

元素1,元素2 {样式声明}

我和div里的文本都会变成蓝色

我和span里的文本都会变成蓝色

/*CSS样式的并集选择器写为如下*/

span,div {

color: blue;

}

注：

元素1和元素2中间用“,”隔开

书写时建议竖着写

4. 链接伪类选择器

类型

作用

a:link

选择所有未被点击的链接

a:visited

选择所有已被点击的链接

a:hover

选择鼠标经过的链接

a:active

选择鼠标按下未弹起的链接

也可以为a指定类名，然后通过类名使用链接伪类选择器。

链接伪类选择器注意事项：

为了确保生效，请按照LVHA的顺序声明。(:link -> :visited -> :hover -> :active)

因为a链接在浏览器中具有默认样式(颜色为蓝色，有下划线等)，所以在实际工作中都需要给链接单独指定样式。

链接伪类选择器在实际工作开发中的写法：

a {

color: gray;

}

a:hover {

color: red;/*鼠标经过的时候，由原来的灰色变成了红色*/

}

5. :focus伪类选择器

用于选取获得焦点的表单元素，焦点就是光标。

一般情况下，类表单元素才能获取，所以这个选择器主要针对于表单元素来说。

eg.

/*CSS样式的:focus伪类选择器写为如下*/

input:focus {

background-color: red;

}

6. 总结

选择器

作用

特征

使用情况

后代选择器

选择后代元素

可以是子孙后代

较多

.demo span

子元素选择器

选择最近一级后代元素

只选择亲儿子

较少

.demo>span

并集选择器

选择某些具有相同样式的元素

可以用于集体声明

较多

.demo1,.demo2

链接伪类选择器

选择不同状态的链接

与链接相关

较多

a:link、a:visited、a:hover、a:active

:focus伪类选择器

选择获得光标的表单

与表单相关

较少

input:focus

总结

以上是编程之家为你收集整理的CSS复合选择器全部内容，希望文章能够帮你解决CSS复合选择器所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。