一、基本选择器
1.1 标签选择器
结构： 标签名{css属性名：属性值}
通过标签名，找到页面中所有的这类标签，选择的是一类标签，不是单独的一个，无论嵌套关系有多深，都能找到对应的标签
<style>
p{
color: red;
}
</style>
<body>
<p>
标签选择器
</p>
</body>
1.2 类选择器
结构： .类名{css属性名：属性值；}
所有的标签都有 class 属性，class 属性的属性值成为类名（类似于起了一个名）
- 类名不能以数字、中划线开头
- 一个标签中可以同时有多个类名，类名之间用空格隔开
- 类名可以重复
<style>
.one{
color: red;
}
</style>
<body>
<div class="one">
类选择器
</div>
</body>
1.3 id选择器
结构： #id属性值{css属性名：属性值;}
- id 属性值在一个页面中是唯一的，类似于身份证号码
- 一个标签只能有一个 id 属性值
- 一个 id 选择器只能选中一个标签
在实际开发中，类选择器用得比较多，id 一般是配合 js 来使用的，除非特殊情况，一般不要给 id 设置样式
<style>
#one{
color: red;
}
</style>
<body>
<div id="one">
id选择器
</div>
</body>
1.4 通配符选择器
结构：* {css属性名：属性值}
在实际开发中用得很少，可能会用来去除页面中默认的 margin 和 padding
<style>
#{
color: red;
}
</style>
<body>
<div>
通配符选择器
</div>
</body>
二、复合选择器
2.1 交集选择器
语法：选择器1选择器2{css样式}
PS：之间没有空格，是紧挨着的
找到页面中既能被选择器1，又能被选择器2选中的标签，如果有标签选择器，则标签选择器必须放在前面
<style>
p.one{
color: red;
}
</style>
<body>
<p class="one">
这个元素会被应用样式
</p>
<div>
这个元素不会被应用样式
</div>
</body>
2.2 并集选择器
语法：选择器1, 选择器2{css样式}
找到选择器1和选择器2选中的标签，选择器之间用 , 隔开，可以是基本选择器或者复合选择器
<style>
p, div{
color: red;
}
</style>
<body>
<p>
这个元素会被应用样式
</p>
<div>
这个元素也会被应用样式
</div>
</body>
三、属性选择器
| 语法 | 用法 |
|---|---|
| [属性] | 选中含有指定属性的元素 |
| [属性=属性值] | 选中含有指定属性和指定属性值的元素 |
| [属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
| [属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
| [属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*选择属性名为title,设置字体颜色红色 */
[title]{
color:red;
}
/*选择属性名为title和属性值为ab的元素 ,设置背景色为粉色 */
[title=ab]{
background-color: pink;
}
/* 选择属性名为title和属性值以ab开头的元素，设置font-weight为bolder */
[title^=ab]{
font-weight: bolder;
}
/* 选择属性名为title和属性值以ab结尾的元素，设置字体为40px */
[title$=ab]{
font-size: 40px;
}
/* 选择属性名为title和属性值含有c的元素，设置背景色为绿色 */
[title*=c]{
background-color: green;
}
</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>
</html>
运行效果如下：
四、关系选择器
| 语法 | 用法 |
|---|---|
| 父亲>儿子 | 儿子单个选择 |
| 祖先 后代 | 后代全部选择 |
| 兄+弟 | 相邻兄弟选择(必须是兄弟且严格相邻) |
| 兄~弟 | 全部兄弟选择 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器(兄弟、父子选择器)</title>
<style>
/* 父子选择 ，单个*/
/* div > span{
background-color: green;
font-size: 40px;
} */
/* 祖先后代选择，全部 */
/* div span{
color:brown
} */
/* 必须相邻兄弟选择，是兄弟但不相邻，不选择 */
/* div + span{
color: blue
} */
/* 全兄弟选择 */
/* p ~ span{
color: aqua
} */
/* p ~ *{
color:chocolate
} */
</style>
</head>
<body>
<div>
我是div
<p>
我是div中的p
<span>我是p中的span1</span>
<span>我是p中的span2</span>
</p>
<div>我是div中的div</div>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>
五、伪类选择器
伪类：不存在的类，表示元素的一种
5.1 元素选择伪类选择器
:前有空格代表从子类开始数，没有空格就从所在级数开始
以下的都是在所有元素中选择：
:first-child：第一个子元素
:last-child：最后一个子元素
:nth-child(n)：选中第 n 个元素
- n 的范围是 0 到正无穷（全选）
- even 或 2n：选中偶数位的元素
- odd 或 2n+1：选中奇数位的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-child</title>
<style>
div :first-child{
color: red;
}
p :last-child{
background-color: aquamarine;
}
span:nth-child(even){
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>
<span>我是p1中的span1</span>
<span>我是p1中的span2</span>
</p>
<p>
<span>我是p2中的span1</span>
<span>我是p2中的span2</span>
</p>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
<span>我是div中的span3</span>
<span>我是div中的span4</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>
运行效果图如下：
以下的都是在相同元素中选择：
:first-of-type：第一个子元素
:last-of-type：最后一个子元素
:nth-of-type(n)：选中第 n 个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-type</title>
<style>
div :first-of-type{
color: red;
}
p :last-of-type{
background-color: aquamarine;
}
span:nth-of-type(even){
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>
<span>我是p1中的span1</span>
<span>我是p1中的span2</span>
</p>
<p>
<span>我是p2中的span1</span>
<span>我是p2中的span2</span>
</p>
<div>我是div里面的div1</div>
<div>我是div里面的div2</div>
<span>我是div中的span1</span>
<span>我是div中的span2</span>
<span>我是div中的span3</span>
<span>我是div中的span4</span>
</div>
<span>我是div之外的span1</span>
<span>我是div之外的span2</span>
</body>
</html>
运行效果图如下：
5.2 否定伪类选择器
:not()：将符号条件的元素去除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>否定伪类选择器</title>
<style>
:not(:first-of-type):not(:last-child){
color: red;
}
</style>
</head>
<body>
<p>文字</p> <!-- 不变红 -->
<p>文字</p> <!-- 变红 -->
<p>文字</p> <!-- 变红 -->
<p>文字</p> <!-- 不变红 -->
<span>文字</span> <!-- 不变红 -->
<span>文字</span> <!-- 变红 -->
<span>文字</span> <!-- 变红 -->
<span>文字</span> <!-- 不变红 -->
</body>
</html>
5.3 特殊应用的伪类
这两个都是超链接独有的，由于隐私问题，visited 这个伪类只能修改链接的颜色
-
:link：表示未访问过的 a 标签 -
:visited：表示访问过的 a 标签
以下两个伪类是所有标签都可以使用的：
:hover：鼠标移入后元素的状态:active：鼠标点击后，元素的状态
六、伪元素选择器
常见的伪元素选择器：
::first-letter：第一个字母::first-line：第一个行::selection：选中的元素::before：元素开始的位置前::after：元素开始的位置后
before 和 after 必须配合 contend 一起使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>伪元素选择器</title>
<style>
/* 文章的首字母 字体大小为24px */
div::first-letter {
font-size: 24px;
}
/* 文章的第一行添加背景色灰色 */
div::first-line {
background-color: grey;
}
/* 选中的内容 字体为红色 */
::selection{
color: red;
}
/* 在元素开始的位置前+'你好' */
div::before{
content: '你好';
color:pink
}
/* 在元素开始的位置后+'拜拜' */
div::after{
content: '拜拜';
color:blue
}
</style>
</head>
<body>
<div>hello < />
<div>
<span>span1</span>
<span>span2</span>
</div>
</body>
</html>
运行效果图如下：
