CSS的层次选择器,伪类选择器

本文深入讲解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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值