1.CSS基础选择器
1）通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 28px;
}
div {
color: red;
background-color: pink;
}
</style>
</head>
<body>
<div>码海无际</div>
<span>码海无际</span>
</body>
</html>
4_1.jpg
2）标签选择器
标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
color: pink;
}
</style>
</head>
<body>
<div>码海无际</div>
</body>
</html>
4_2.jpg
3）类选择器
- 不要纯数字、中文等命名，尽量使用英文字母来表示。
- 长名称或词组可以使用中横线来为选择器命名。
- 不建议使用“_”下划线来命名CSS选择器。
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.color-blue{
color: blue;
}
</style>
</head>
<body>
<div class="color-blue">码海无际</div>
<span class="color-blue">志向高远</span>
</body>
</html>
4_3.jpg
4）多类名选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.color-blue{
color: blue;
}
.font-size28{
font-size: 28px;
}
</style>
</head>
<body>
<div class="color-blue font-size28">码海无际</div>
<span class="color-blue">志向高远</span>
</body>
</html>
4_4.jpg
5）id选择器
- 用法基本和类选择器相同。
- id选择器使用“#”进行标识，后面紧跟id名。
- 该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
id选择器和类选择器区别：
W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
类选择器(class)，好比人的名字，是可以多次重复使用的，比如：张伟、老王。
id选择器，好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。
id选择器和类选择器最大的不同在于使用次数上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#color-blue {
color: blue;
}
</style>
</head>
<body>
<div id="color-blue">码海无际</div>
</body>
</html>
4_5.jpg
6）选择器的优先级
通配符选择器<标签选择器<类选择器<id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
color: pink;
}
div {
color: red;
}
div {
color: blue;
}
.color-green {
color: green;
}
#color-blueviolet {
color: blueviolet;
}
</style>
</head>
<body>
<div class="color-green" id="color-blueviolet">码海无际</div>
</body>
</html>
4_6.jpg
2.CSS复合选择器
1）交集选择器
- 交集选择器由两个或两个以上选择器构成。
- 选择器之间没有任何的连接符号，选择器之间没有固定顺序。
- 选择器可以是：标签选择器、类选择器、id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.color-blue {
color: blue;
}
div#color-red.color-red{
color: red;
}
</style>
</head>
<body>
<div class="color-blue">码海无际</div>
<span class="color-blue">码海无际</span>
<hr>
<div class="color-red" id="color-red">码海无际</div>
</body>
</html>
4_7.jpg
2）并集选择器
- 交集选择器由两个或两个以上选择器构成。
- 选择器之间通过英文逗号连接，选择器之间没有固定顺序。
- 选择器可以是：标签选择器、类选择器、id选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*span {*/
/* color: blue;*/
/* font-size: 28px;*/
/*}*/
/*div {*/
/* color: blue;*/
/* font-size: 28px;*/
/*}*/
/*俩种写法一样*/
span, div {
color: blue;
font-size: 28px;
}
</style>
</head>
<body>
<div>码海无际</div>
<span>码海无际</span>
</body>
</html>
4_8.jpg
3）子元素选择器
- 子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
- 这里的子，指的是亲儿子，不包含孙子、重孙子之类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div > .color-pink > span{
color: pink;
}
</style>
</head>
<body>
<div>
<div class="color-pink">
<span>码海无际</span><!--有效果-->
</div>
<div>
<span>码海无际</span><!--无效果-->
</div>
<span>
<div class="color-pink">
<span>码海无际</span><!--无效果-->
</div>
</span>
</div>
</body>
</html>
4_9.jpg
4）后代选择器
- 后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
- 包含孙子、重孙子之类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div h1{
color: blue;
}
</style>
</head>
<body>
<div>
<h1>码海无际</h1>
<span>
<h1>码海无际</h1>
</span>
</div>
</body>
</html>
4_10.jpg
5）伪类选择器
- 伪类选择器用于向某些选择器添加特殊的效果。
- 伪类对象要配合content属性一起使用。
- 一个冒号是css2的写法，两个冒号是css3的写法，表达的意思一样。
- 冒号的前面和后面都不允许有空格。
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个p元素的第一个字母 |
| :first-line | p:first-line | 选择每个p元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 p 元素 |
| :before | p:before | 在每个p元素之前插入内容 |
| :after | p:after | 在每个p元素之后插入内容 |
| :lang(language) | p:lang(it) | 为p元素的lang属性选择一个开始值 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:visited{
color: red;
}
p:before{
content:"P前面";
color: red;
}
p:after{
content:"P后面";
color: red;
}
</style>
</head>
<body>
<a href="https://www.taobao.com">淘宝</a>
<a href="https://www.baidu.com">百度</a>
<a href="https://www.taobaoaa.com">淘宝aa</a>
<a href="https://www.taobaoaaa.com">淘宝aaa</a>
<hr>
<p>P元素</p>
</body>
</html>
4_11.jpg
