CSS选择器

努力飞的菜鸟

已于 2022-10-19 13:09:08 修改

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： python pandas 数据分析

于 2022-08-29 18:05:32 首次发布

本文链接：https://blog.csdn.net/m0_57590419/article/details/126577964

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在前端开发中,使用css是必不可少的,而熟练使用css选择器又是熟练使用css的前提条件,只有能够熟练使用css选择器,才能找到与之相对应的元素,从而添加对应的属性。

一、通配符选择器

通配符选择器会匹配页面中的所有元素,通常使用它清除外边距、内边距

* { margin: 0; padding: 0; }

二、id选择器

id选择器使用 “#” 进行标识，后面紧跟id名。id是唯一的,只能对应页面中唯一的元素.

#id名 { 属性一: 属性值; 属性二: 属性值; }

三、标签名选择器

标签名选择器会匹配页面中所有的这个标签,从而添加相应的属性

标签名 { 属性一: 属性值; 属性二: 属性值; }

例如
p { font-size: 16px; color: red }   // 会给页面所有的p标签设置字体大小16px、字体颜色为红色

四、类选择器

类选择器又叫class选择器，是使用最多的选择器，使用时需要给标签添加一个class属性，不同的类名之间用空格隔开

<p class="类名一 类名二"></p>

类选择器使用“.”进行标识，后面紧跟id名。类选择器会匹配页面中所有具有此类名的元素。

.类名 { 属性一: 属性值; 属性二: 属性值; }

例如
.color-red { color: red }    // 会给页面中所有具有”color-red”类名的元素设置字体颜色为红色

五、属性选择器

属性选择器会匹配带有这个属性条件的元素。

选择器	描述
[attr]	匹配所有带有attr属性的元素
[attr = value]	匹配所有attr属性值为value的元素
[attr ~= value]	匹配所有attr属性包含value的元素(value和其他值要用空格隔开)
[attr *= value]	匹配所有attr属性包含"value"字符串的元素(value和其他值不需要用空格隔开)
[attr ^= value]	匹配所有attr属性以"value"字符串开头的元素
[attr $=value]	匹配所有attr属性以"value"字符串结尾的元素

六、后代选择器

语法格式：选择器一选择器二 {} (多个选择器名称之间用空格隔开)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 p {   // 会匹配到box1下面的所有p标签
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<p>这是一段文字</p>
			<div class="box2">          <!-- 这两个p标签字体颜色都会变成红色 -->
				<p>这是另一段文字</p>
			</div>
		</div>
	</body>
</html>

七、子代选择器

语法格式：选择器一 > 选择器二 {} (多个选择器名称之间用">"隔开)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1 > p {    // 只会匹配box1子元素中的p标签
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<p>这是一段文字</p>   <!-- 只有这个p标签字体颜色会变成红色 -->
			<div class="box2">              
				<p>这是另一段文字</p>
			</div>
		</div>
	</body>
</html>

八、兄弟选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div ~ p {
				color: red;
			}
		</style>
	</head>
	<body>
		
		<p>第一个p标签</p>
		<div>这是一个div标签</div>
		<p>第二个p标签</p>
		<h1>这是一个H1标签</h1>
		<p>第三个p标签</p>
	</body>
</html>

运行效果:

九、伪元素选择器

选择器	示例	描述
empty	p:empty	选择没有子元素的p元素
first-child	p:first-child	选择p元素为父元素第一个子元素的p元素
last-child	p:last-child	选择p元素为父元素的最后一个子元素的p元素
not	p:not(.aa)	选择所有不带有名为aa的class的p标签
nth-child(n)	p:nth-child(2)	选择p元素为父元素第二个子元素的p元素
nth-last-child(n)	p:nth-last-child(2)	选择p元素为父元素第二个子元素的p元素