css选择器（css重点知识）

最新推荐文章于 2024-07-15 11:52:19 发布

河北颜良

最新推荐文章于 2024-07-15 11:52:19 发布

阅读量214

点赞数

文章标签： html5 css css3 html

本文链接：https://blog.csdn.net/zhe06/article/details/105755889

版权

1.要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
作用：
规范了页面有哪些元素能够使用声明好的样式。
目的：为了匹配页面的元素。

2，选择器详情：
1.元素选择器
特点：由标记名称作为选择器。主要匹配页面中指定的标记所对应的所有元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
     <title></title>
   **< style > 标签用于为 HTML 文档定义样式信息。css选择器写在这标签里面。**
<style type="text/css">
		语法：	元素（如：body,div,p,ul,li）{
					属性：值；
					属性2：值2；
					。。。
				}
	例子：	h1 （选择h1）{
			修改h1的属性值
			color（属性）:red（值）
			}
</style>
</head>
<body>
	<h1>Header 1</h1>
</body>
</html>

2.类选择器
特点：允许被任意元素所引用的选择器
语法：
1.声明
.类名{
属性：值；
。。。
}
2.引用
<标记 class=‘类名字’>（引用加‘.’）

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     语法：	.类名{
			属性：值；
			。。。
			}
     	.box{
     		font-size: 50px;
     	}
     </style>
 </head>
 <body>     
		<p class="box">zhe</p>
 </body>
</html>

特殊用法：
1.分类选择器的定义方式
允许将元素选择器和类选择器结合到一起使用，为了实现对某种元素的不同样式的细分控制。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     语法：		元素选择器.类选择器{
							属性：值；
							。。。
						}
			.a1{类选择器，匹配所有的class为a的元素}
			div{元素选择器，匹配所有div元素}
				
				div .a1{匹配class为a的div元素}	
     </style>
 </head>
 <body>     
		<div><p class="a1"></p></div>
 </body>
</html>

2.多类选择器的使用方式

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     语法：		允许让一个元素同时引用多个类选择器，多个类选择器之间使用 空格 隔开。
			.c1 .c2 .c3{}
     </style>
 </head>
 <body>     
		<div class="c1"></div>
		<div class="c2"></div>
		<div class="c3"></div>
 </body>
</html>

3.伪类选择器
1.作用
匹配元素不同状态的选择器
ex：超链接a元素，具备四个状态
状态1：连接未被访问是的状态
状态2：鼠标悬停在元素上的状态
状态3:当元素被激活时
状态4:当访问过后的时候。
2.语法
伪类状态：通常会配合其他元素一起使用。
1、连接伪类
（1）link ----匹配超连接未被匹配的状态。状态1
（2）visited-----匹配超链接打开后的状态。状态4
2、动态伪类
（1）hover-----匹配悬停在元素上边的状态。状态2
（2）active-----匹配元素被激活时候的状态。状态3
（3）focus-----匹配获取焦点时候的状态。（文本框和密码框使用居多）

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
    	匹配元素：伪类状态{。。。}
     	a:link{}
     	a:hover{}
     	a:active{}
     	.....
     </style>
 </head>
 <body>     
		<a href=""id="a1"></a>
 </body>
</html>

4.id选择器
1、id的作用
在HTML中，每个元素都允许设置一个id属性，主要用于表示该元素在网页中独一无二的标识。
< div id=‘id名字’ >< /div >
2.ID选择器
为了匹配页面中指定ID的值的元素。

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     语法：   #ID值{属性：值；}
    		#a1{
    			。。。。
    		}
     </style>
 </head>
 <body>     
		<a href=""id="a1"></a>
 </body>
</html>

5.群组选择器
1.作用
（1）定义多个选择器的共同样式
（2）定义方式是一个以,隔开的选择器列表。
2.语法：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
    		#main,p,div.span,.redColor{
				color:red;
			}
			等同于：
			#main{color:red;}
			p{color:red;}
			div.span{color:red;}
			.redColor{color:red;}

     </style>
 </head>
 <body>     
		。。。。。
 </body>
</html>

6.后代选择器（把这个元素比喻成爷爷，那爷爷的儿子孙子，都能改）
1.作用
依托于原色的后代关系来匹配元素（不限制层级，）
2.语法

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     	选择器1 选择器2{。。。}（div下面所有的p标签）
    		div p{
    			font-size: 50px;
    		}
     </style>
 </head>
 <body>     
		<div>
			<p>zhe</p>
			<p>zhe</p>
			<p>zhe</p>
			<p>zhe</p>
			<a href=""></a>
		</div>
 </body>
</html>

7.子代选择器（把元素比喻成爷爷，但他只能管儿子，要想管孙子还要叫儿子帮忙管才能）
1.作用
依托于元素的子代关系来匹配元素（是由一层关系）
2.语法
选择器1>选择器2{。。。}

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
     	选择器1 选择器2{。。。}
    		div p{
    			font-size: 50px;
    		}
     </style>
 </head>
 <body>     
		<div>
			<p>zhe</p>
			<a href=""></a>
		</div>
 </body>
</html>

选择器的优先级
当多个选择器能够同时应用到统一元素上时候，并且样式发生冲突的话，则要按照不同选择器的优先级来应用样式。

选择器的优先级看 "权值"
选择器 			取值
元素选择器       1
类/伪类          10
ID选择器         100
内联方式         1000

河北颜良

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器（css重点知识）

css选择器笔记加讲解，帮助你快速理解。
复制链接

扫一扫

css选择器（css重点知识）

“相关推荐”对你有帮助么？