CSS常用5种选择器应用实例以及优先级问题

最新推荐文章于 2023-07-10 19:58:00 发布

必看吧

最新推荐文章于 2023-07-10 19:58:00 发布

阅读量469

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_43665697/article/details/98094757

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.元素选择器

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	div{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- 元素选择器 格式 元素名{}-->
	<!-- 如果有相同元素则都有效果 -->
	<div >11</div>	
	<div >22</div>	
	</body>
</html>

效果图如下:

2.1class选择器 (匿名)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	.d{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- class选择器(匿名) 格式 class值{}-->
	<!-- 如果有class值相同则都有效果 -->
	<div >
		<p class="d">我是标题1</p>
		
	</div>	
		<p class="d">我是标题2</p>	
	</body>
</html>

效果图如下 :

2.2class选择器 (有名)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	div.d{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- class选择器(有名) 格式 .class值{}-->
	<!-- 只有div下的class="d"有效果  p标签不会有效果 -->
	<div class="d" >我是标题1</div>	
	<p class="d">我是标题2</p>	
	</body>
</html>

效果图如下 :

3.id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	#d{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- id选择器 格式 #idclass值{}-->
	<!-- id值相同都有效果 -->
	<div id="d" >我是标题1</div>	
	<p id="d">我是标题2</p>	
	</body>
</html>

效果图如下:

选择器优先级问题

id选择器>class选择器>元素选择器

样式表优先级问题

内嵌>内联>外联>浏览器自带

4.分组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	#id,.class,h2{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- 分组择器 格式 ,隔开{}-->
	<!-- 无论是id class 还是 元素 选择器 只要写了都有效果 -->
	<div id="id" >我是标题1</div>	
	<p class="class">我是标题2</p>	
	<h2 >我是标题2</h2>		
	</body>
</html>

效果图如下:

5.子类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
        <style type="text/css">
        	div .class{
			 	 position: relative;
				 left: 100px; 
				 width: 50px;
				 height: 50px;
				 background-color: aqua;
				 border: 1px solid black;
			}
        </style>
	</head>
	<body>
	<!-- 子类择器 格式 1元素空格2元素{}-->
	<!-- 只要1元素下的2元素才有效果 -->
	<div  >
	<p class="class">我是标题1</p>		
	</div>	
	<p class="class">我是标题2</p>	
			
	</body>
</html>

效果图如下:

必看吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS常用5种选择器应用实例以及优先级问题

1.元素选择器<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ position: relative; left: 100px; ...
复制链接

扫一扫