CSS选择器

最新推荐文章于 2021-11-09 22:28:53 发布

原创最新推荐文章于 2021-11-09 22:28:53 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了多种CSS选择器，包括元素、属性、ID、class等选择器。阐述了不同选择器的语法格式、作用范围及优先级规则，如多个样式冲突时优先级高的取胜。还提及伪类选择器描述鼠标控制标签的4种状态及相关顺序要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、元素选择器（标签选择器）

Selector {
 property1: value1;
 property2: value2;
}

二、属性选择器

优先级越高越严格，会覆盖之前的样式，当多个CSS样式定义都可以对某个HTML元素起作用时，该HTML元素的显示外观将是多个CSS样式定义"迭加"作用的效果。如果多个CSS样式定义之间有冲突时，则冲突属性以优先级更高的CSS样式取胜。

如果是数字的话要加双引号
/* 对所有id属性的div元素起作⽤ */
        div[id]{
			background-color: #aaa;
		}	
		/* 对所有id属性值包含xx的div元素起作⽤ */
		div[id*=xx"{
			background-color: #999;
		}
		/* 对所有id属性值以xx开头的div元素起作⽤ */		
		div[id^=xx]{
			background-color: #555;
		}	
		/* 对所有id属性值等于xx的div元素起作⽤ */
		div[id=xx]{
			background-color: #111;
		}
		/* 对所有id属性值以连字符分隔的div元素并且第一个元素是1的起作⽤ 
		<div id="1-w-1-w">我们</div><br />
		*/
		div[id|=“1”]{
			background-color: #1859A5;
		}
		/*对所有id属性以1结尾的div元素起作用*/
		div[id$=“1”]{
			background-color: #269ABC;	
		}
		/*对所有id属性以空格分开的元素并且某个值为w的div元素起作用*/
		div[id~="w"]{
			background-color: pink;
		}

三、ID选择器

在同一个html页面中，多个标签的id属性必须唯一
ID选择器指定CSS样式将会对具有指定id属性值的HTML元素起作⽤。ID选择器的语法格式如下:#idValue { 属性：值}上面语法指定该CSS样式对id为idValue的HTML元素起作用。

仅对指定元素起作用的ID选择器E#idValue {...}该语法指定该CSS样式对id为idValue的E元素起作⽤。

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	
	<style type="text/css">		
		#c{
			background-color: #00FF00;
		}
		a#d{
			background-color: #00FF00;
		}
	</style>
	</head>
	<body>		
		<h3 id=c>我们</h3><br />
		<a id=d>我们</a><br />
	</body>
</html>

四、class选择器

同一个html页面上个多个标签可以指定同名class属性，格式如下：[E].classValue {...} /* 其中E是有效的HTML元素*/ 指定该CSS定义对class属性值为classValue的E元素起作用。此处的E可以忽略，如果省略E，则指定CSS对所有的class属性为classValue的元素都起作用。

<style type="text/css">
.myclass {
 background-color: #dddddd;
 }
 div.myclass {
 border:2px dotted black;}
</style> 
<body>
 <p class="myclass">class属性为myclass的P元素</p>
 <div class="myclass">class属性为myclass的div元素</div>
</body>

上述中定义的两个CSS都可作用于<div…/>元素，因此该元素显示的效果是两个CSS样式"迭加"的效果。既指定标签又指定class值的选择器的优先级更高。

五、包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部。其语法格式如下:Selector1. Selector2 {...}

div.a {
 width: 200px;
 height: 35px;
 border: 2px dotted black;
 background-color: #888;
 }
<div>
 <p class="a">处于div内部且class属性为a的元素</p>
 </div>

六、子选择器

语法如下：Selector1>.Selector2 {...}
包含选择器与子选择器有些类似，他们之间存在以下区别:对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是"孙子元素"也可；而对于子选择器，要求目标选择器必须作为外部选择器对应元素的直接子元素才可,否则不起作用。

div>.a{
 	background-color: pink;
 }
 <div>
 <p class="a">处于div内部且class属性为a的元素</p>
 </div>

七、并集选择器

格式如下：选择器1,选择器2,{css代码}

八、通配符选择器

格式如下：*{css代码}

九、交集选择器（子元素选择器）

格式如下：选择器1 选择器2 选择…{css代码}

十、伪类选择器

伪类：又称为（锚伪类）描述鼠标控制标签的状态，研究鼠标经过标签的4种状态
link：鼠标没有访问过的状态
hover:鼠标经过标签的一种状态（开发中比较多）
active:激活状态（点击了，但是没有松开的状态）
visited:访问过多状态:(点击后并且松开了)

格式：选择器：状态名称（link/hover/active/visited）{ css样式; }
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，
才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。

tbody tr:hover{
		font-size=99px;
		background-color:#FF0000;
		/*单元格的属性：鼠标经过单元格：小手状态*/
		cursor:pointer;
	}