006---css复合选择器（交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器，伪元素选择器）

本文主要是介绍006---css复合选择器（交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器，伪元素选择器），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

一、交集选择器

例如：

<div class="orange">I am P1</div>
<p class="orange">I am P2</p>

.orange {color: orange;
}
p.orange {font-size: 40px;
}

效果是：

p.orange {font-size: 40px;
}

这段代码的p.orange{}就是交集选择器, 中间没用空格。

图解：

                                        

二、并集选择器

并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器，都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以使用并集选择器、

语法：

                        

例如：

<div>I am P1</div>
<p>I am P2</p>

div,
p {color: orange;
}

效果：

图解：

                            

三、后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代。其写法就是把外层标签写在前面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

        

例如：

<p>I am P1</p>
<div><p>I am P2</p>
</div>

p {color: skyblue;
}div p {font-size: 40px;
}

效果展示：

图解：

            

四、子元素选择器

子元素选择器只能选择作为其元素子元素的元素。其写法就是父亲标签写在前面，子级标签写在后面，中间跟一个“>”进行连接,注意，符号左右两侧各保留一个空格。

                    

例如：

<ul class="nav"><li> 一级菜单<ul><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li>
</ul>

.nav > li {color: skyblue;
}

效果是：

但是样式为：

.nav li {color: red;
}
.nav > li {color: skyblue;
}

效果却是这样：

像第二个样式，子级元素选择器会覆盖后代选择器，但是只覆盖了一级菜单（.nav的儿子）。

五、属性选择器

例如：

<a href="#" title="aa">百度</a>
<a href="#" title="bb">新浪</a>
<a href="#">jj</a>
<a href="#">yy</a>
<a href="#">xx</a>

a[title] {color: skyblue;
}

效果展示（只选中a标签里有title属性的a标签）：

又例如：

<input type="text" value="输入">
<input type="text" value="输入">
<input type="text" value="输入">
<input type="submit">
<input type="reset">
<input type="button" value="按钮">

input[type="text"]{color: red;
}

此时属性均为type，那么选出文本框进行添加样式，就如上选择，效果展示：

对于后面三个，就是，选择属性值具有相同的字符（可以不完全相等），进行添加样式。如，对于第四个，有class="font12"，class="font22"，class="font32"，这三个class的属性值的首几个字母均为“font”，这样就可以通过 标签名（如div）, div[class^=font]{ color:red;} 进行设置样式。其他两个类似。

六、伪类选择器

1. E::first-letter文本的第一个单词或字

2. E::first-line文本的第一行

3. E::selection可改变选中文本的样式

注意：“：”一个冒号是伪类选择器，“::”两个冒号是伪元素选择器。

对于第三个，效果是如下图：

当鼠标对文字进行选择的时候，实现E::selection的样式。

4. E::before和E::after（△重要）

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须结合content属性使用。

div::before {content: "开始";
}
div::after {content: "结束";
}

E:after和E:before在高版浏览器下自动识别为E::after和E::before。

如：

<div>今年</div>

div::before {content: "我";
}
div::after {content: "18岁";
}

效果如下：

第二个图表示插入的文字在div里。

这篇关于006---css复合选择器（交集选择器，并集选择器，后代选择器，子元素选择器，属性选择器，伪元素选择器）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---