关系选择器（4种）
1. 父子选择器: 通过父亲选中儿子.
语法: 父亲>儿子 {}
2. 后代选择器: 通过祖先选中后代
语法: 祖先 后代{}
3. 兄+弟选择器: 通过兄长选中紧邻的弟弟
语法: 兄+弟{}
4. 兄~弟选择器: 通过兄长选中符合条件的所有弟弟
语法: 兄~弟{}
<head>
<title>关系选择器</title>
<style>
/* 父子选择器的演示 */
div>span{
font-size: 40px;
color: blue;
}
/* 后代选择器的演示 */
div p span{
color: orange;
}
/* 兄+弟选择器的演示 */
p+div{
background-color: aqua;
}
span+span{
font-style: italic;
}
/* 兄~弟选择器的演示 */
div~span{
color: pink;
}
</style>
</head>
<body>
<div>
1
<p>
2
<span>3</span>
</p>
<div>4</div>
<span>5</span>
<span>6</span>
</div>
<span>7</span>
<span>8</span>
</body>
属性选择器（5种）
| 语法 | 作用 |
| [属性名] | 选中具有指定属性名的元素 |
| [属性名=属性值] | 选中指定属性名等于某属性值的元素 |
| [属性名^=指定值] | 选中指定属性名的属性值是以指定值开头的元素 |
| [属性名$=指定值] | 选中指定属性名的属性值是以指定值结尾的元素 |
| [属性名*=指定值] | 选中指定属性名的属性值包含指定值的元素 |
<head>
<title>属性选择器的学习</title>
<style>
[title]{
color:red ;
}
[title="a"]{
color: orange;
}
[title^="a"]{
color: pink;
}
[title$="c"]{
color: blueviolet;
}
[title*="b"]{
color: teal;
}
</style>
</head>
<body>
<h1 title="a">《红豆》</h1>
<h2 title="ab">唐·王维</h2>
<p title="abc">红豆生南国，</p>
<p title="abab">春来发几枝。</p>
<p title="c">愿君多采撷，</p>
<p>此物最相思。</p>
</body>
伪类选择器（11种）
1. 伪类是指不存在的类，特殊的类；
2. 伪类用来描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素……
3. 伪类一般都是使用冒号开头
元素选择伪类选择器
冒号前有空格代表从子类开始数，无空格代表从所在级数开始。
常用的伪类选择器:
:first-child 分支中最后一层的第一个子元素被选中
:last-child 分支中最后一层的最后一个子元素被选中
:nth-child(n) 第n个子元素被选中. n的值可以从1到正无穷
2n表示偶数位的元素被选中,也可以使用单词even
2n+1表示奇数位的元素被选中,也可以使用单词odd
:first-of-type 同类型中的第一个元素
:last-of-type 同类型中的最后一个元素
:nth-of-type(n) 同类型中的第一个元素 可以使用2n/even表示偶数位,
使用2n+1/odd表示奇数位
否定伪类选择器
:not(其他选择器)
注意,括号里不能传入复合选择器.
作用: 将其他选择器选中的元素排除
<head>
<title>Document</title>
<style>
/* 将所有p里的文字都变红,除了第一个和最后一个 */
p:not(p:first-child):not(p:last-child){
color: red;
}
</style>
</head>
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
</body>a链接的伪类选择器
| 选择器 | 作用 |
| : link | 超链接独有的选择器,表示未访问前的状态 |
| : visited | 超链接独有的选择器,表示访问过的状态 |
| : hover | 所有元素都可以使用的选择器,表示鼠标进入该元素时的状态 |
| : active | 所以元素都可以使用的选择器,表示鼠标左键点中该元素时的状态 |
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 超链接访问前的颜色设置 */
a:link{
color: orangered;
}
/* 超链接访问后的颜色设置,注意:网址必须真实存在,访问后才算真正的访问过 */
a:visited{
color: green;
}
/* 鼠标进入后的状态设置 */
p:hover{
background-color: aqua;
}
/* 鼠标左键点击的状态设置 */
p:active{
font-size: 40px;
color: violet;
}
</style>
</head>
<body>
<div>
<a href="https://www.taobao.com">网站1</a>
<a href="www.yc.com">网站2</a>
<p>段落1</p>
</div>
</body>伪元素选择器（5种）
伪元素: 就是虚假的元素,并不存在,只是css为了对段落标记进行设置,提供的内置的选择器
| 选择器 | 作用 |
| p::first-letter | 对段落的首字符设置样式 |
| p::first-line | 对段落的首行设置样式 |
| p::selection | 对段落中被鼠标选中的文字设置样式 |
| p::before | 对段落中的第一个字符的前面设置样式,可以理解为向段落的第一个字符之前插入内容 |
| p::after | 对段落中的最后一个字符的后面设置样式,可以理解为向段落的最后一个字符之后插入内容 |
<head>
<title>伪元素选择器</title>
<style>
p::first-letter{
font-size: 30px;
color: blue;
}
p+p::first-line{
background-color: pink;
}
p::selection{
color: red;
background-color: teal;
}
p::before{
content: "你好";
color: red;
}
p::after{
content: "$";
background-color: chartreuse;
}
</style>
</head>
<body>
<p>hello</p>
<p> hello,world!</p>
</body>选择器的优先级
内联样式 >id选择器>类和伪类选择器>元素选择器>默认状态
样式的继承
CSS样式继承：
是指子元素会继承父元素的某些样式属性。
常见的可以继承的CSS属性包括 font-family 、 color 、 font-size、line-height。
注意：并不是所有的样式都会被继承，比如背景相关的，布局相关等的样式都不会被继承。
