CSS的层次选择器，伪类选择器_css 不确定多少层指定class-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44272970/article/details/103664911

本文深入讲解CSS中的选择器，包括包含选择器、子选择器、选择器分组、伪类选择器等，通过实例演示如何精确地定位和样式化页面元素。

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

前端学习经验（6）

CSS

选择器

层次选择器

包含选择器：选择所有被元素1包含的元素2，不限层级

	元素1 元素2{
				样式表
				}
如：<head>
	   <style>
  		 .aaa p{
		       font-family: "楷体";
		       font-size: 30px;
		       color: orange;
   				}
   		.aaa div{
		       border: red solid 3px;
		       height: 100px;
		       width: 200px;
  				}
   	   </style>
    </head>
	<body>
		<div class = "aaa">
       		<p>包含选择器</p>
      		<div>包含选择器1</div>
 		</div>
	</body>
<p>包含选择器</p>，<div>包含选择器1</div>两个元素均包含在元素<div class = "aaa"></div>中。

子选择器：选择所有元素1的子对象元素2，只能选择父级元素的下一级元素

	元素1>元素2{
				样式表
			   }
如：<head>
	   <style>
  		  .aaa>p{
		       font-family: "黑体";
		       font-size: 30px;
		       color: bule;
   				}
   		.aaa>div{
		       border: green solid 10px;
		       height: 100px;
		       width: 200px;
  				}
   	   </style>
    </head>
	<body>
		<div class = "aaa">
       		 <p>子选择器</p>
			 <p>子选择器1</p>
			 <div>子选择器2</div>
			 <p>子选择器3</p>
			 <div>子选择器4/div> 
 		</div>
	</body>

选择器的分组：多个元素采用相同的样式

	元素1,元素2,元素3,...,元素n{
								样式表
							  }
如：
	<head>
	   <style>
   		#a,#b,.c{
   		  	    color: orange;
   		  	    font-family: "楷体";
		        font-size: 30px;			      
		        border: solid green 1px;
		        height: 100px;
		        width: 200px;
  			}
   	    </style>
    </head>
	<body>
		<div class = "aaa">
			 <h1 id = "a">呵呵</h1>
       		 <p id = "b">呵呵2</p>
			 <p class= "c">呵呵3</p>
			 <div class= "c">呵呵1</div>
 		</div>
	</body>

伪类选择器

动态伪类选择器：用来添加一些选择器的特殊效果。

如：鼠标四种状态
	<head>
	  <style>
        	a:link{                        		/* 未访问的链接 */
         		 background: blue;                 
       		 	   }
        	a:visited{                          /* 已访问的链接 */
            	 background: red;
       			   }
        	a:hover{                            /* 鼠标划过链接，此样式必须在a:link，a:visited之后才能生效 */
            	 background: green;
        		   }    
       		a:active{                           /* 已选中的链接,不常用 */
            	 background: purple;
       			   }
   	  </style>
    </head>
	<body>
		<a href = "https://www.baidu.com/">百度一下</a>
	</body>

after和before属性：after和before必需配合content一起使用

	<head>
	  <style>
        	.a:before{								/*元素：before ：选择器在被选元素的内容前面插入内容。*/
            	content:"开始--";
            	color:orange;
        			}
        	.a:after{								/*元素：after ：选择器在被选元素的内容后面插入内容。*/
            	content:"--结束";
            	color:green;
        			}	
   	   </style>
    </head>
	<body>
		<div class = "a" >这是一个盒子</div>
	</body>

目标伪类选择器：

元素：target{
			样式表
			}
如：点击文字，跳转到指定区域。
		<head>
	  		<style>
        		div{
        			border:green solid 2px;
        			width:300px;
        			height:200px;
        			}
        		div:target{
        			background:green;
        				  }
   	  		</style>
   		</head>
		<body>
			<a href = "#box1">跳转到第一个盒子</a>
			<a href = "#box2">跳转到第二个盒子</a>
			<a href = "#box3">跳转到第三个盒子</a>
			<a href = "#box4">跳转到第四个盒子</a>
			<div id="box1">
	        第一个盒子
			</div>
			<div id="box2">
	        第二个盒子
			</div>
			<div id="box3">
	        第三个盒子
			</div>
			<div id="box4">
	        第四个盒子
	        </div>
		</body>