CSS选择器二（高级选择器）

淡淡的烟草味﹌ 2021-12-08 20:23 297阅读 0赞

今天来整理一下剩下的四个高级选择器  
**高级选择器**  
后代选择器：用空格隔开  
伪类选择器  
父子选择器  
组合选择器（分组选择器）：用逗号隔开

**1后代选择器，规定用空格隔开**  
后代选择器，描述的是祖先结构  
直接看例子吧

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>后代选择器</title>
    		<style type="text/css">
    			#name1 p{
    				color: red;
    			}
    			#name1 p font{
    				color: green;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="name1">
    			<p>我是后代
    				<font>我是后代的后代</font>
    			</p>
    			
    		</div>
    	</body>
    </html>

**2伪类选择器**  
对于标签，其对应几种不同的状态：

link：超链接点击之前  
visited：超链接点击之后  
hover：鼠标放到某个标签上的时候  
active：点击某个标签没有松鼠标时  
CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：

静态伪类：只能用于超链接  
动态伪类：针对所有标签都适用  
下面来分别讲一下这两种伪类选择器。  
（1）静态伪类选择器  
用于以下两个状态（只能使用于超链接）：

link：超链接点击之前  
visited：超链接点击之后

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>静态伪类选择器</title>
    		<style type="text/css">
    			a:link{
    				/*点击之前是红色的*/
    				color: red;
    			}
    			a:visited{
    				/*点击后是绿色的*/
    				color: green;
    			}
    			a:hover{
    				color: blue;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="ffff">我是超链接</a>
    	</body>
    </html>

（2）动态伪类选择器

<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>静态伪类选择器</title>
    		<style type="text/css">
    			
    			a:visited{
    				/*点击后是绿色的*/
    				color: green;
    			}
    			/*鼠标悬停*/
    			a:hover{
    				/*鼠标悬停的样式*/
    				cursor: hand;
    				color: blue;
    			}
    			/*鼠标按下的效果*/
    			a:active{
    				color: palevioletred;
    			}
    			
    		</style>
    	</head>
    	<body>
    		<a href="ffff">我是超链接</a>
    	</body>
    </html>

**3 父子选择器**  
作用在：子选择器上  
写法：  
父选择器>子选择器  
\{  
css属性1：值;  
css属性2：值;  
\}

/*父子选择器*/
    	    ul>li{
    			color: red;
    			background-color: green;
    		}
    		
    		ol>li{
    			color: green;
    			background-color: red;
    		}
    		
    		#ul1>li{
    			color: orange;
    			background-color: gray;
    			float: left;
    			list-style: none;
    			width: 80px;
    		}

请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

**4群组选择器**  
多种类型的选择器，使用逗号分隔，写在一块

/*组合选择器*/
    			span,a,font,.first_class,#div1 p{
    				display: block;
    				width: 200px;
    				height: 200px;
    				border: 1px solid;
    			}

CSS优先级

1.  标签自带样式< 通配符选择器< 标签选择器 < 类选择器 < Id选择器< 行内样式  
    注意：覆盖 相同的CSS属性，
2.  权重值来确定 优先级  
    标签自带样式< 通配符选择器< 标签选择器 < 类选择器 < Id选择器< 行内样式  
    0 1 10 1000 最高  
    注意：  
    A. 基础选择性 可以采用第一种方式  
    B. 权重值来判断【权重越大，优先级越高】  
    C. 权重值相等的时候， 写在后面的 高于 写在前面的样式  
    .dd p\{  
    color: blue;  
    \}
    
        div .pp{
           	color: green;
           }

D. 参考链接：[https://www.cnblogs.com/cnblogs-jcy/p/8574177.html][https_www.cnblogs.com_cnblogs-jcy_p_8574177.html]

[https_www.cnblogs.com_cnblogs-jcy_p_8574177.html]: https://www.cnblogs.com/cnblogs-jcy/p/8574177.html