并集选择器
给所有的选择器选中的标签设置属性。以","隔开,如下所示
<style>
/* 为 <h1> ~ <h4> 元素的文本内容设置相同颜色 */
/* h1 {
color: lightcoral;
}
?
h2 {
color: lightcoral;
}
?
h3 {
color: lightcoral;
}
?
h4 {
color: lightcoral;
}
*/
/* 通过并集选择器进行改写 */
h1,h2, h3, h4{
color: lightcoral;
}
</style>
?
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
</body>效果：h1~h4颜色相同，可以用并集选择器集合起来
交集选择器
<!DOCTYPE html>
<html lang="en">
?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器</title>
<style>
p {
color: lightcoral;
}
?
.cls {
color: lightskyblue;
}
?
/* 交集选择器 */
p.cls {
color: magenta;
}
</style>
</head>
?
<body>
<p>18级启嘉班</p>
<p class="cls">19级启嘉班</p>
<p>20级启嘉班</p>
<div class="cls">启嘉网</div>
</body>
?
</html>效果：交集改变了19级启嘉班的颜色
伪类选择器
CSS 伪类 是向已有选择器添加关键字，改变元素的状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
写法 ：选择器：关键字
例子：
<style>
/*改变button的颜色*/
button:hover {
background-color: lightcoral;
}
</style>效果： 原本鼠标放上去是没有颜色的，现在鼠标放上去变成了红色、
说明：CSS允许在同一个选择器上同时编写多个伪类选择器。
伪类选择器按照用途分为以下5中类型：
- 动态伪类选择器:常与<a>元素配合使用，用来表示用户的某种行为状态。
- 目标伪类选择器:常与<a>元素配合使用，用来定位当前HTML页面中唯一一 个目标元素。
- 元素状态伪类选择器:常与表单组件元素配合使用，用来表示表单组件的某种状态。
- 结构伪类选择器:常与<table> 元素配合使用，利用HTML元素之间的关系定位目标元素。
- 否定伪类选择器:用来定位与指定选择器不匹配的HTML元素。
否定伪类选择器
否定选择器用来定位不匹配某个选择器定位的HTML元素的元素
写法：:not (某个选择器){
属性：属性值
}例子：
<style>
.C {
text-shadow: 2px 2px 3px rgb(240, 9, 98);/*文本阴影*/
}
?
p:not(.C) {
color: green;
}
?
body :not(p) {
text-decoration: underline;/*表示下划线*/
}
</style>
</head>
?
<body>
<p>我是一个p标签。</p>
<p class="C">我是带有class的p标签！</p>
<div>我不是一个块标签。</div>
</body>效果：p:not(.c)是筛选不是p标签里有Class选择器的p标签,那就是第一个p标签,所以是绿色的，而.C不是绿色的。
伪元素选择器
CSS中伪元素选择器的用法与伪类选择器的用法类似，都是在指定CSS选择器增加关键字。但作用不同，伪类选择器是用来改变状态信息的，伪元素选择器是用来设定样式的。
写法：选择器::伪元素
例子：
<style>
.p1::first-line {
color: lightcoral;
}
?
.p2 span {
color: lightcoral;
}
</style>
</head>
?
<body>
<p class="p1">家乡门前空院上植有一棵梨树。至今约莫三十个年头。万不是那声名显赫的名品，结的是青皮小个的酸梨。
?
这梨即使熟透到掉落都难得有一丝丝的甜蜜，恰如这人生百味，甘之如饴是只应天上有的美好期盼。
?
犹记年幼时候，每至初春，那皑皑白雪还没有全部退去，满树的花蕾迎着乍暖还寒的风便窜出头来，约莫两三个星期，满树梨花放，伴着那春阳和煦，梨树便时常没来由的飞花飘絮，如那仙女翩翩起舞的霓裳，美的张扬而放肆。</p>
<p class="p2"><span>待过两个月满树都是那酸酸的青皮梨，父亲知我喜爱上树摘梨，时常忧心我的安危，便自制了一个专用的摘梨小网，放于瓦檐之下。</span>
即使小网上面布满尘埃，我也难得去用它，我就喜欢攀树而上，脚下感受着树枝有节奏的颤动。一手抓着树枝，一手摘得那繁叶不能遮挡的向阳方向的果子。因为向阳的那一面有一块红彤彤的皮，那是我认为勇敢者的勋章。
母亲和奶奶站在树下，早已按捺不住心中的担忧，仰头看着我不断叮咛：“小心、小心……”此起彼伏。可又害怕声大吓着我，所以两个平时坦诚干净的农村妇人敛起了嗓门儿，有了难得一见的温柔。</p>
</body>效果：.p1::first-line的一直是一行，他会自动的把第一行的字加上颜色
before和after伪元素
添加一些修饰性的内容 ，写法::before 和 ::after
示例代码：
<style>
h1::before{
color: brown;
content: "?";
}
p::after{
color: chartreuse;
content: "?";
}
p{
font-size: 30px;
}
</style>
</head>
<body>
<h1>18级启嘉班</h1>
<p>19级启嘉班</p>
</body>效果：如下 ::before在文本的前面添加修饰内容，::after在文本下面添加了修饰内容
下次更新HTML的颜色