先圣博客
0%

CSS选择器

发表于 更新于 分类于
前端学习笔记

课程回顾：

CSS概念和优势：

  • 层叠样式表。
  • 数据展示（html）和修饰美化（CSS）分离
  • 可复用性高
  • 提供更加精准的元素美化

CCS的导入方式：

1：行内样式

1
<p style="color: red;">这是内容</p>

2：内部样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		p{
			color: red;
		}
	</style>
	<body>
		<p>这是内容</p>
	</body>
</html>

3：外部样式（html、css分离）

1
2
3
p{
	color: red;
}

3-1：@import导包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--建议写在这个位置head和body之间-->
	<style type="text/css">
		@import url("css/p.css");
	</style>
	<body>
		<p>这是内容</p>
	</body>
</html>

3-2：link标签导入

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <!--建议写在这个位置，即head标签内-->
    <link rel="stylesheet" href="css/p.css" />
  </head>
  <body>
    <p>这是内容</p>
  </body>
</html>

课程简化：

0：选择器的概念

选择器一段CSS代码起的名称，可以理解为变量名。

1：基本选择器

1-1：标签选择器

作用于html中的所有该类型标签。——关键词：所有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--标签选择器会匹配所有的对应标签-->
	<style>
		p{
			color: green;
		}
	</style>
	<body>
		<p>这是内容</p>
		<p>这也是一个内容</p>
		<p>他们都是P标签里面的内容</p>
	</body>
</html>

1-2：ID选择器

  1. 在标签上加入 **id=”id名” **来标记位置。
  2. 在CSS里面用 **#id名{} **作为选择器
  3. 一个id选择器只建议使用一次——关键词：1次
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--id选择器会匹配对应的id-->
    	<style>
    		#p{
    			font-size: 20px;
    			color: pink;
    		}
    	</style>
    	<body>
    		<p>这是内容</p>
    		<p>这也是一个内容</p>
    		<p id="p">这是id选择器里面的内容</p>
    	</body>
    </html>

1-3：类选择器

  1. 在标签上加入 class=”类名” 来标记位置。
  2. 在CSS里面 ** .类名{}** 作为选择器
  3. 一个类选择器可以多次复用——关键词：复用
  4. 建议：对比id选择器来理解。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--class选择器会匹配对应的类名-->
    	<style>
    		.p{
    			font-size: 20px;
    			color: pink;
    			text-decoration: line-through;
    		}
    	</style>
    	<body>
    		<p>这是内容</p>
    		<p class="p">这是类选择器里面的内容</p>
    	</body>
    </html>

1-4：通配符选择器

*可以匹配所有的内容，他比标签更加强大，也更加耗时。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--通配符在默认的情况下会匹配所有的内容-->
	<style>
		*{
			font-size: 50px;
			color: yellow;
		}
	</style>
	<body>
		<h1>这是h1标签内容</h1>
		<p>这是P标签内容</p>
		<div>这是div标签的内容</div>
	</body>
</html>

2：结构选择器

结构选择器，也叫符合选择器。
他更多是用于复杂的嵌套结构里面，建议先理清结构，再使用选择器。

2-1：交集选择器

  1. 标签选择器+id选择器/类选择器
  2. 逻辑处理为：&&
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--交集选择器前面只能是标签选择器+其他选择器-->
    	<!--理由是交集没有区分符号，如果以其他开头，如.或者#浏览器则无法解析-->
    	<style>
    		p.e{
    			font-size: 50px;
    			color: yellow;
    		}
    	</style>
    	<body>
    		<h1>这是h1标签内容</h1>
    		<p class="e">这是P标签内容</p>
    		<div class="e">这是class选择器的内容</div>
    	</body>
    </html>

2-2：并集选择器

  1. 选择器1，选择器2，选择器n 彼此用户逗号分隔开来
  2. 逻辑处理为：||
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--并集选择器可以匹配所有写在前面的选择器-->
    	<style>
    		p,div{
    			font-size: 50px;
    			color: yellow;
    		}
    	</style>
    	<body>
    		<h1>这是h1标签内容</h1>
    		<p class="e">这是P标签内容</p>
    		<div class="e">这是class选择器的内容</div>
    	</body>
    </html>

2-3：后代选择器

一个标签元素看成一代人。
在目标标签里面嵌套的标签称为其后代。

  1. 祖先标签 后代标签 用空格分割
  2. 后代选择器可以匹配所有的目标后代
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--后代选择器可以选择所有的目标后代-->
    	<style>
    		div p{
    			color: red;
    		}
    	</style>
    	<body>
    		<div>
    			这是祖先标签
    			<p>
    				这是儿子标签
    				<p>
    					这是孙子标签
    					<p>
    						这是曾孙标签
    					</p>
    					<h1>
    						这是曾孙媳妇
    					</h1>
    				</p>
    			</p>
    		</div>
    	</body>
    </html>

2-4：子代选择器

  1. 父代标签>子代标签 用>分割
  2. 可以直接指定父子关系，只要这个关系符合继承理论
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--子代选择器可以选择目标子代，如祖先和曾孙媳妇可以组成父子关系-->
    	<style>
    		div>h1{
    			color: red;
    		}
    	</style>
    	<body>
    		<div>
    			这是祖先标签
    			<p>
    				这是儿子标签
    				<p>
    					这是孙子标签
    					<p>
    						这是曾孙标签
    					</p>
    					<h1>
    						这是曾孙媳妇
    					</h1>
    				</p>
    			</p>
    		</div>
    	</body>
    </html>

3：其他选择器

3-1：属性选择器

  1. 基本选择器[属性] 是否有该属性
  2. 基本选择器[属性=属性值] 是否有该属性值
  3. 基本选择器[属性^=属性值] 属性值是否以什么开头
  4. 基本选择器[属性$=属性值] 属性值是否以什么结束
  5. 基本选择器[属性*=属性值] 属性值是否被包含
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--属性选择器可以更好的定位-->
    	<style>
    		p[class]{
    			color: red;
    		}
    	</style>
    	<body>
    		<div>
    			这是祖先标签
    			<p>
    				这是儿子标签
    				<p class="abc">
    					这是孙子标签
    				</p>
    			</p>
    		</div>
    	</body>
    </html>

3-2：伪类选择器

超链接伪类选择器：

  1. a:lin 默认效果
  2. a:hover 鼠标悬浮
  3. a:active 点击瞬间
  4. a:visited 点击过后
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<!--超链接可能因为浏览器保护部分点击后不显示-->
    	<style>
    		a:link{
    			color: pink;
    		}
    		a:visited{
    			color: black;
    		}
    		a:hover{
    			color: blue;
    			cursor: pointer;
    		}
    		a:active{
    			color: yellow;
    		}	
    	</style>
    	<body>
    		<a href="http://www.baidu.com" target="_blank" >这是超链接</a>
    	</body>
    </html>

4：选择器优先级

4-1：三种导入方式优先级

  • 就近原则（行内>内部>外部）

4-2：不同选择器的优先级：

  • 先看导入方式
  • 再按精确度匹配：（id>class>标签）