CSS元素选择器

关注

原创最新推荐文章于 2026-07-23 12:33:10 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

CSS选择器：基本选择器、复合选择器、伪类选择器、伪元素选择器 CSS选择器包含：基本选择器、复合选择器、伪类选择器、伪元素选择器。基本选择器包括：元素选择器、类选择器、ID 选择器、属性选择器。最常见的 CSS 选择器是元素选择器。换句话说，HTML文档的元素就是最基本的选择器。例如设置 HTML 样式，选择器通常是某个 HTML 元素，如 p、h1、a 等，甚至可以是 HTML 本身。在 HTML 中，各种各样的属性可以给元素添加很多附件信息，并且可以通过 JavaScript 控制这些附加属性的内如何状态。在使用 CSS 的时候，也可以使用这些附加属性来指定元素。阅读详情

CSS元素选择器：

1.1 元素选择器

元素选择器是最简单的选择器，其语法格式如下：

E{ ... }/*其中E代表有效的HTML元素*/
E是任意的有效的HTML元素，“*”可匹配HTML文档中的任意元素

<style type="text/css">
       *{
		border: 1px solid red;
		padding: 4px;
	}
</style>

在上面的CSS样式定义中使用了 * 作为通配符。

1.2 属性选择器

从广义的角度上，元素选择器其实是属性选择器的特例。属性选择器的几种语法格式：

E{ ... }：指定该CSS样式对所有的E元素起作用。
E[attr]{ ... }:指定该CSS样式对具有attr属性的E元素起作用。
E[arrt = value]{ ... }：指定该CSS样式对所有包含arrt属性，且arrt属性为value的E元素其作用。
E[arrt ~= value]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值以空格隔开的系列值，其中某个值为value的E元素起作用。
E[arrt |= value]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值以连字符隔开的系列值，其中第一个值为value的Tag元素起作用。
E[arrt ^= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以value开头的字符串的E元素起作用。
E[arrt $= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以value结尾的字符串的E元素起作用。
E[arrt *= "value"]{ ... }:指定该CSS样式对所有包含arrt属性，且arrt属性的值为以包含value的字符串的E元素起作用。

        <style type="text/css">
		
		/* 对所有的div元素起作用*/
		div{
			width: 300px;
			height: 30px;
			background-color: #eee;
			border: 1px solid black;
			padding: 10px;
			
		}
	     /* 对所有有id属性的div元素起作用*/
		div[id]{
			
			background-color: #aaa;
		}
		/* 属性值包含xx的元素起作用*/
		div[id *= xx]{
			
			background-color: #999;
		}
		/*对所有以xx开头的div元素起作用*/
		div[id^= xx]{
			color: #fff;
			background-color: #555;
		}
		/* 对id=xx的div元素起作用*/
		div[id=xx]{
			
			background-color: #111;
			color:#fff;
		}
	</style>
	<body>
		<div>没有任何属性的div</div>
		<div id="a">带id属性的div元素</div>
		<div id="zzxx">id属性值包含xx的div元素</div>
		<div id="xxyy">di属性值以xx开头的元素</div>
		<div id="xx">id属性值为xx的yuans</div>
	</body>

效果如下：

1.3 ID选择器

ID选择器制定CSS样式将会对有id属性值的HTML元素起作用，ID选择器的语法格式如下： #idValue { . .. };

定义仅对指定元素起作用的ID选择器的语法格式如下： E#idValue{ ... };

             <style type="text/css">
			div{
			width: 300px;
			height: 30px;
			background-color: #ddd;
			padding: 3px;
			
		}
		#xx{
			border: 2px dotted black ;
			background-color: #888;
		}
		p#xx{
			width: 300px;
			height: 30px;
			border: 2px dotted black;
			background-color: #888;
		}
		</style>
                <div> 没有任何属性的div </div>
                <div id="xx">id属性值为xx的元素</div>
                <p id="xx">id为xx的p元素</p>

效果如下：

1.4 class选择器

class选择器指定CSS样式对具有指定class属性值的元素起作用。class选择器的语法格式如下： [E] .classValue { ... }

此处E可以省略，如果省略E，则对所有class属性值为classValue的元素起作用。

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

结果如下：

1.5 包含选择器

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

       <style type="text/css">
       	  div{
       	  	
       	  	width: 350px;
       	  	height: 100px;
       	  	background-color: #ddd;
       	  	margin: 15px;
       	  	
       	  }
       	  div .a{
       	  	width: 200px;
       	  	height: 35px;
       	  	border: 2px dotted  black;
       	  	background-color: #888888;
       	  }
       </style>
       <div>没有任何属性的div</div>
       <div> <section> <div class="a"> 处于div内且属性值为a的元素</div></section></div>
       <p class="a">没有在div内但是class值为a的p元素 </p>

结果如下：

1.6 子选择器

子选择器用于指定目标选择器必须是某个选择器对应的元素的子元素。子选择器的语法格式如下：Selector1>Seceltor2 { ... }

提示：包含选择器与自选择其类似，它们的区别是：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是”孙子元素也可以“，但是子选择器不可以，它要求目标选择器必须是外部选择器对应的元素的直接子元素才可以。

        <style type="text/css">
       	  div{
       	  	
       	  	width: 350px;
       	  	height: 60px;
       	  	background-color: #ddd;
       	  	margin: 5px;
       	  	
       	  }
       	  div>.a{
       	  	width: 200px;
       	  	height: 35px;
       	  	border: 2px dotted  black;
       	  	background-color: #888888;
       	  }
       </style>
       <div>没有任何属性的div</div>
       <div> <section> <div class="a"> 处于div内且属性值为a的元素</div></section></div>
       <div> <p class="a"> class属性值为a位于div内部的p元素</p></div>

结果如下：

1.7 CSS3新增添的兄弟选择器

兄弟选择器和子选择器的道理类似，它的语法结构如下： Selector1 ~ Selector2 { .... } ;

          <style type="text/css">
        	#b ~ .a{
        		background-color: #008000;
        	}
        </style>
       <div>
	       	<div>没有任何属性的div元素</div>
	        <div class="a"> class="a"的div元素</div>
             <!--  因为位于id="b"的前面  所以不会有css效果-->
	        <div id="b"> id="b"的div元素</div>
	        <p class="a"> class="a"的p元素</p>
	        <div class="a">class="a"的div元素</div>  </div>

效果如下：

1.8 选择器组合

          <style type="text/css">
        	div ,.a ,#b{
        		
        		width: 200px;
        		height: 35px;
        		border: 2px dotted black;
        		color: #888;
        	}
        </style>
        
       <div> 没有任何属性的div </div>
	   <p class="a"> class="a"的p元素</p>
	   <section  id="b"> id="b"的section元素</section>

效果如下：