CSS选择器

最新推荐文章于 2023-09-07 21:55:37 发布

刀在花丛中

最新推荐文章于 2023-09-07 21:55:37 发布

阅读量347

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/qq_29070549/article/details/123469032

版权

html+css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如果将css样式绑定到对应的元素，可以有以下几种方式：
1、元素选择符\类型选择符（element选择器）
可以绑定到结构元素标签，如果用的是内部css，该html的此元素标签默认值都被改变

2、class选择器\类选择器
可以绑定指定class的元素

<html>
	<style>
		.name{
				...
			}
	</style>
	<body>
		<p class="name">内容</p>
	</body>
</html>

3、id选择器
可以绑定指定id的元素，用法跟class选择器类似

4、通配符选择器
用*表示，代表所有的元素统一设置

5、群组和后代选择器
群组选择器就是将元素选择器合并，每个元素用逗号隔开
后代选择器是嵌套标签中，想指定某个被嵌套的标签，可以用嵌套关系指定

<html>
	<style>
		div p{
				...
			}
	</style>
	<body>
		<div class="name">
			<p>内容</p>
		</div>
	</body>
</html>

6、伪类选择器
针对超链接标签的指定

<html>
	<style>
		<--! 超链接的初始状态>
		a:link{
			属性:属性值
			...
		}
		<--! 超链接被访问后的状态>
		a:visited{
			属性:属性值
			...
		}
		<--! 鼠标划过超链接时的状态>
		a:hover{
			属性:属性值
			...
		}
		<--! 鼠标按下超链接时的状态>
		a:active{
			属性:属性值
			...
		}
	</style>
	<body>
		<a link="url">内容</a>
	</body>
</html>

这4个选择器同时存在时，有顺序要求
link > visited > hover > active

7、选择器的权重
元素选择器 < 类选择器 < id选择器 < 包含选择器 < 内联样式 < !important
如果权重相同，采取就近原则