CSS选择符知识

最新推荐文章于 2023-03-14 23:12:40 发布

pipiangry

最新推荐文章于 2023-03-14 23:12:40 发布

阅读量155

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_44521190/article/details/117198578

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS选择器的用法，包括全体选择符、元素选择符、类选择符、ID选择符、伪类选择符、后代选择符、子选择符、组合选择符、分组选择符、相邻选择符、属性选择符以及它们之间的优先级和层叠规则。通过实例展示了如何精准控制网页元素的样式，帮助理解CSS选择器的强大和灵活性。

摘要由CSDN通过智能技术生成

1.全体选择符 *

<style>
	*{color:blue;}
</style>

应用于所有元素

2.元素选择符

根据具体元素进行选择
例：h1、h2、h3、p

<style>
	h1{color:blue;}
</style>

3.类选择符 class相关

根据元素是否采用这个class类名进行选择

<style>
	.qqlove{
				color:red;}
</style>
对应
<div class="qqlove"></div>

4.ID选择符最为精准的选择符 id相关

<style>
	#qqlove{
				color:yellow;}
</style>
对应
<div id="qqlove"></div>

5.伪类选择符选择处于特定状态下的元素

<style>
	:link{
			color:red;}
	:visited{}
	:active{}
	:focus{}
	...
</style>

6.后代选择符上下文选择符空格进行间隔属间关系

<style>
	/*--表示id为introduction下的em元素*/
	#introduction em{}
	/*表示id为 introuction 下类名为 info 的 p 元素下的
	所有元素*/
	#introduction .info p *{color:pink;}
</style>

7.组合选择符多类型选择符进行组合

<style>
	/*表示p元素中 id 为 introduction 
	元素为a类名为info的伪类hover样式*/
	p#introduction a.info:hover{color:silver;}
</style>

8.分组选择符就是并列关系设置

<style>
	/*表示p h1 h2 都是这个样式*/
	p,h1,h2{
		color:blue;}
</style>

9.子选择符 >

和后代选择符的区别，后代选择符则是包含，而子选择符是直接子元素，多次嵌套的内容无效。

<style type="text/css">
			body > div > strong{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="">
			<p><strong>pplove</strong></p>
			<strong>qqlove</strong>
		</div>
	</body>

子选择器演示
子选择器效果如上所示。
如果是后代选择器

<style type="text/css">
			/* body > div > strong{
				background-color: blue;
			} */
			body div strong{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="">
			<p><strong>pplove</strong></p>
			<strong>qqlove</strong>
		</div>
	</body>

效果则是strong中都是蓝色背景。
其区别相当于子选择器是一个直接的过程，而后代选择器则是间接过程。

10.相邻选择符 +

表示定义两个相邻标签的样式

<style type="text/css">
			/* body > div > strong{
				background-color: blue;
			} */
			p + strong + strong{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="">
			<p><strong>1.pplove</strong></p>
			<strong>2.qqlove</strong>
			<strong>3.uyuh</strong>
			<strong>4.dddd</strong>
		</div>
	</body>

效果如下图所示：
相邻选择

11.属性选择符

属性选择符有四种形式：

（1）E[attr] 
（2）E[attr="value"]
（3）E[attr~="value"]
（4）E[attr|="value"]

第一种形式匹配具有该属性的标签。
第二种形式匹配具有该属性且属性值为value的标签
第三种形式匹配具有该属性且属性值中有空格隔开的字段，其中一个字段等于value的标签。
第四种形式匹配具有该属性且属性值中以value值开始并使用连自符（-）分割的标签。

12.具体性与层叠关系

按照具体性优先原则
内联样式>id选择符>类或伪类选择符>元素选择符>全体选择符
同样具体则按照出现顺序进行覆盖
更具体>n*弱具体
层叠顺序：
最靠近内容的样式获胜

13. !import 权限给予相应属性值最高权限

h1{color:red !import;}

pipiangry

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录