CSS选择器
目录
基本选择器
id选择器
根据id名称，在当前界面中找到对应的唯一一个标签，然后设置属性。
id名称 {
属性：值
}
注意：
- 1、在企业开发中，如果仅仅只是为了设置样式，通常不会使用id，在前端中id通常是留给js使用的
- 2、每个标签都可以设置一个唯一id，id相当于标签的身份证号，在同一界面内id绝不能重复。
- 3、引用id一定要加#
- 4、id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>id选择器</title>
<style>
#p1 {
color: red;
}
#p2 {
color: green;
}
#p3 {
color: blue;
}
</style>
</head>
<body>
<p id="p1">君不见</p>
<p id="p2">黄河之水天上来</p>
<p id="p3">奔流到海不复回</p>
</body>
</html>
类选择器
根据指定的类名称，在当前界面中找到对应的标签，然后设置属性
.类名称 {
属性：值;
}
注意：
- 1、类名就是专门用来给某个特定的标签设置样式的
- 2、每个标签都可以设置一个或多个class，用空格分隔，class相当于标签的名称，因此同一界面内class可以重复
- 3、引用class一定要加点
- 4、类名的命名规则与id相同
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
color: green;
}
.p3 {
color: blue;
}
</style>
</head>
<body>
<p class="p1">君不见</p>
<p class="p2">黄河之水天上来</p>
<p class="p3">奔流到海不复回</p>
</body>
</html>
第一行与第三行的颜色都是红色，第一行与第二行的字体大小都是50px，第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
.p1 {
color: red;
}
.p2 {
font-size: 50px;
}
.p3 {
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p1 p2">君不见</p>
<p class="p2 p3">黄河之水天上来</p>
<p class="p1 p3">奔流到海不复回</p>
</body>
</html>
标签选择器
根据标签名称，在当前界面中找到所有该名称的标签，然后设置属性
标签名称 {
属性:值;
}
注意：
- 1、只要是HTML的标签都能当做标签选择器
- 2、标签选择器选中的是当前界面中的所有该名称的标签，而不能单独选中该名称的某一个标签
- 3、标签选择器，无论嵌套多少层都能选中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>君不见</p>
<p>黄河之水天上来</p>
<p>奔流到海不复回</p>
</body>
</html>
通配符选择器
选择所有标签。
* {
属性:值;
}
注意：在企业开发中一般不会使用通配符选择器，由于通配符选择器是设置界面上所有标签的属性，所以在设置之前会遍历所有的标签，如果当前界面标签比较多，那么性能就会比较差
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<h2>将进酒</h2>
<p>君不见</p>
<p>黄河之水天上来</p>
<p>奔流到海不复回</p>
<a href="#">君不见，高堂明镜悲白发，朝如青丝暮成雪</a>
</body>
</html>
组合选择器
后代选择器
找到指定标签的所有后代（子、孙、重孙。。。）标签，设置属性
标签名1 xxx {
属性：值;
}
注意：
- 1、后代选择器必须用空格隔开
- 2、后代也可以使用其他选择器，比如id或class
- 3、后代选择器可以通过空格一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
div p {
color: red;
}
#id1 li p {
font-size: 50px;
}
div ul li a {
font-size: 100px;
color: green;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落</p>
<a href="">点我啊1</a>
</li>
<li>
<a href="#">点我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html>
子元素选择器
找到指定标签的所有特定的直接子元素，然后设置属性。
标签名1>标签名2 {
属性:值;
}
先找到名称叫做“标签名1”的标签，然后在这个标签中查找所有直接子元素名称叫做“标签名2”的元素。
注意：
- 1、子元素选择器之间需要用
>符号连接，并且不能有空格，否则就是后代标签 - 2、子元素选择器只会查找直接子代，不会向深层查找
- 3、子元素选择器不仅可以用标签名称，还可以使用其他选择器，如id或class
- 4、子元素选择器可以通过
>符号一直延续下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
body>p {
color: green;
}
div>p {
color: red;
}
.aaa>a {
font-size: 100px;
}
div>ul>li>.ddd {
color: blue;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想为div内所有标签都设置属性，无论用id还是class都不合理，因为当div内的标签过多，我们无法加那么多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落2</p>
<a href="">点我啊1</a>
</li>
<li>
<a href="#">点我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html>
毗邻选择器/相邻兄弟选择器
选择紧跟其后的标签，CSS2推出
选择器1+选择器2 {
属性:值;
}
注意点：
- 1、毗邻选择器必须通过+号连接
- 2、毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
通用兄弟选择器
给指定选择器后面的所有选择器中的所有标签设置属性，CSS3推出。
选择器1~选择器2 {
属性:值;
}
注意：
- 1、通用兄弟选择器必须用~来连接
- 2、通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签，无论是否被隔开，都可以被选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
h1+p {
font-size: 50px;
}
h1~p {
color: red;
}
</style>
</head>
<body>
<h1 >我是标题1</h1>
<a href="">有了这个标签，p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是标题2</h1>
<p>我是段落</p>
</body>
</html>
交集选择器与并集选择器
交集选择器
给所有选择器选中的标签中，相交的那部分标签设置属性。
选择器1选择器2 {
属性:值;
}
注意：
- 1、选择器与选择器之间没有任何符号连接
- 2、选择器可以使用标签名称、id、class
- 3、交集选择器在开发中并不多见，因为
p.part1完全可以被.part1取代。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
p.part1 {
color: red;
}
p#p1{
font-size: 100px;
}
</style>
</head>
<body>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
并集选择器
给所有满足条件的标签设置属性
选择器1,选择器2 {
属性:值;
}
注意：
- 1、选择器与选择器之间必须用逗号连接
- 2、选择器可以使用标签名称、id、class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
.part1,h1,a {
color: red;
}
</style>
</head>
<body>
<h1>哈哈啊</h1>
<p class="part1">我是段落</p>
<p id="p1">我是段落</p>
<p class="part1">我是段落</p>
<a href="#">我是我</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
序列选择器
CSS3中新推出的选择器中，最具代表性的9个，过去的选择器中要选中某个标签必须加id或class，而序列选择器不用加id或class，可以选同级别的第任意个标签。
1、同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
2、同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
3、其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
实例：同级别
#1、同级别的第一个
#1.1 示范一
p:first-child {
color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话第一个p和div中的第一个p都变成红色，
#1.2 示范二
p:first-child {
color: red;
}
代表：同级别的第一个，并且第一个要求是一个p标签
<h1>w我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
这样的话只有div中的第一个p变红，因为在有在div内同一级别的第一个才是p
注意点：
:fist-child就是第一个孩子，不区分类型
#2、同级别的最后一个
p:last-child {
color: red;
}
代表：同级别的最后一个，并且最后一个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
</div>
<p>我是段落7</p>
这样的话只有6跟7都变红
#3、同级别的第n个
p:nth-child(3) {
color: red;
}
代表：同级别的第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落2”变红
#4、同级别的倒数第n个
p:nth-last-child(3) {
color: red;
}
代表：同级别的倒数第3个，并且第3个要求是一个p标签
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
这样的话只有“我是段落6.1”和“我是段落5”被选中
实例：同级别同类型
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
#1、同级别同类型的第一个
p:first-of-type {
color: red;
}
“我是段落1”和“我是段落6.1”被选中
#2、同级别同类型的最后一个
p:last-of-type {
color: red;
}
“我是段落7”和“我是段落6.2”被选中
#3、同级别同类型的第n个
p:nth-of-type(2) {
color: red;
}
“我是段落2”和“我是段落6.2”被选中
#4、同级别同类型的倒数第n个
p:nth-last-of-type(2) {
color: red;
}
“我是段落5”和“我是段落6.1”被选中
其他：
#1、同类型的唯一一个
p:only-of-type {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
<p>我是段落6.2</p>
<h1>我是标题</h1>
</div>
<p>我是段落7</p>
“我是段落7“被选中
#2、同级别的唯一一个
p:only-child {
color: red;
}
<h1>我是标题</h1>
<div>
<p>我是段落6.1</p>
</div>
<p>我是段落7</p>
“我是段落6.1”被选中
属性选择器
根据指定的属性名称找到对应的标签，然后设置属性。该选择器最常用于input标签。
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结尾的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="http://www.baidu.com">http://www.baidu.com</a>
<a href="https://www.baidu.com">https://www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
伪类选择器
常用的几种伪类选择器
1、没有访问的超链接a标签样式：
a:link {
color:blue;
}
2、访问过的超链接a标签样式：
a:visited {
color:gray;
}
3、鼠标悬浮在元素上应用样式:
a:hover {
background-color: #eee;
}
4、鼠标点击瞬间的样式：
a:active {
color:green;
}
5、input输入框获取焦点时的样式：
input:focus {
outline: none;
background-color: #eee;
}
注意：
-
1、a标签的伪类选择器可以单独出现，也可以一起出现
-
2、a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效，
link,visited,hover,active -
3、hover是所有其他标签都可以使用的
-
4、focus只给input标签使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
a:link {
color: #cccccc;
}
a:visited {
color: #55BBBB;
}
a:hover {
color: green;
}
a:active {
color: red;
}
input:hover {
outline: none;
background-color: #cccccc;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">点击我</a>
<input type="text">
</body>
</html>
伪元素选择器
常用的伪元素
1、first-letter:杂志类文章首字母样式调整
p:first-letter {
font-size: 48px;
}
2、before：用于在元素的内容前面插入新内容
p:before {
content: "*";
color: red;
}
3、after：用于在元素的内容红米插入新内容
p:after {
content: "?";
color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p:first-letter {
font-size: 50px;
}
/*两个冒号与一个是一样的，老版本用的是一个冒号，考虑到兼容性推荐使用一个冒号*/
a::after {
content: "?";
color: red;
}
a:before {
content: "-";
color: green;
}
</style>
</head>
<body>
<p>英雄不问出处，流氓不论岁数</p>
<a href="#" class="help">哈哈哈哈</a>
<a href="#" class="help">呵呵呵呵</a>
<a href="#" class="help">嘻嘻嘻嘻</a>
</body>
</html>
