复合选择器
标签指定式选择器
由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或者是id选择器，两个选择器之间不能有空格。
标签名.类名{属性：值}
总结:
标签指定式选择器符合 ：既…又…的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
其次该标签的类名（class）的值必须是one */
div.one {
color: red;
}
</style>
</head>
<body>
<div class="one">文字</div>
</body>
</html>后代选择器
选择器 选择器 {属性: 值;}
总结：
◆后代选择器标签之间的结构关系必须是嵌套结构
◆后代选择器中只能选中所有的后代元素（直接子元素和间接子元素）
◆后代选择器中，选择器与选择器之间必须使用空格隔开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
其次该标签的类名（class）的值必须是one
.one p {
color: red;
}
</style>
</head>
<body>
<div class="one">
<p>哈哈</p>
</div>
</body>
</html>子代选择器
选择器>选择器 {属性: 值；}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 子代选择器 */
div>span {
color: red;
}
</style>
</head>
<body>
<div>
文字1
<span>文字</span>
<p>
<span>文字2</span>
</p>
</div>
</body>
</html>总结：
◆子代选择器只能选中直接子元素
◆子代选择器不能选中父元素
◆子代选择器标签的结构必须是嵌套关系
并集选择器
选择器,选择器 {属性: 值;}
注意：
◆首先并集选择器可以选中所有符合条件的标签
◆并集选择器与标签的结构无关
◆并集选择器一般在css样式初始化的时候会使用(用来清除默认样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,p,li,span {
color: red;
}
</style>
</head>
<body>
<div>文字</div>
<p>文字1</p>
<span>文字2</span>
<ul>
<li>
文字4
</li>
</ul>
<a href="#">超链接</a>
</body>
</html>结构伪类选择器
:first-child{属性：值；} 选中父元素中的第一个子元素
:last-child:{属性：值；} 选中父元素中的最后一个子元素
:nth-child(n):{属性：值；} 选中父元素中的第n个子元素
n可取一个正整数
n可以设置一个关键字 odd(奇书) even(偶数)
n还可以是一个表达式 an+b a和b可以设置正数或者负数
:nth-last-child(n){属性: 值;} 选中倒数第n个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* p:first-child {
color: red;
}
p:last-child{
color: red;
} */
/* p:nth-child(0) {
color: red;
} */
/* p:nth-child(even) {
color: red
} */
/* p:nth-child(-n+3) {
color: red;
} */
p:nth-last-child(-n+3) {
color: red;
}
</style>
</head>
<body>
<div>
<p>文字1</p>
<p>文字2</p>
<p>文字3</p>
<p>文字4</p>
<p>文字5</p>
<p>文字6</p>
<p>文字7</p>
<p>文字8</p>
</div>
</body>
</html>属性选择器
[属性]{属性：值；}
前面再加选择器可以变为标签指定式选择器
div[class="one"]{
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 将页面中标签具有class属性的标签选中 */
/* [class] {
color: red;
} */
/* 选中标签class属性的值是one的标签 */
/* [class="one"]{
color: red;
} */
/* 选中标签class属性的值是以字母o结束的标签 */
/* [class$="o"] {
color: red;
} */
/* 选中标签class属性的值是以字母o开始的标签 */
/* [class^="o"] {
color: red;
} */
/* 选中标签class属性的值是包含字母o的标签 */
[class*="o"] {
color: red;
}
</style>
</head>
<body>
<div class="one">1243</div>
<div class="two">div123</div>
<p name="test">123</p>
<span class="one" id="one">123</span>
</body>
</html>伪元素选择器
::first-line{}
选中标签中第一行字符改变样式
.box::first-line {
color: red;
} ::first-letter{}
选中标签中第一个字符改变样式
.box::first-letter {
color: red;
}::selection{}
设置鼠标选中区域的样式
注意：
该选择器中只能设置与颜色相关的属性
.box::selection {
color: orange;
background-color: pink;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
border: 1px solid red;
}
/* .box::first-line {
color: red;
} */
/* .box::first-letter {
color: red;
} */
.box::selection {
color: orange;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
你只是一个过客，从我的世界路过
你只是一个过客，从我的世界路过
你只是一个过客，从我的世界路过
你只是一个过客，从我的世界路过
你只是一个过客，从我的世界路过
</div>
</body>
</html>