CSS3 高级选择器

缺乏、安全感 2023-10-18 13:40 118阅读 0赞

**高级选择器：**

1>层次选择器

2>结构伪类选择器

3>属性选择器

详细介绍这几个选择器：

###  层次选择器 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]

页面：

/*后代选择器:孩子的孩子...*/
    body p{
    	 /*border: 1px solid red;*/
    }
    
    /*子选择器:body的孩子*/
    body>p{
    	/*border: 1px solid blue;*/
    }
    
    /*相邻兄弟选择器:比较近的兄弟*/
    h2+p{
    	/*border: 2px solid yellowgreen;*/
    }
    
    
    /*通用兄弟选择器:找到p远近兄弟*/
    h2~p{
    	border: 5px solid chocolate;
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

### 结构伪类选择器 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2][]

页面：

/*E:first-child :找父的第一个孩子 */
    
    /*注意:不能用body作为父*/
    li:first-child{
    	border: 2px solid darkcyan;
    }
    
    /*E:first-child :找父的最后一个孩子 */
    
    li:last-child{
    	border: 2px solid brown;
    }
    
    /*E F:nth-child(n): 找到父的孩子第几个
       odd:奇数 ,even:偶数（从1开始数）
     */
    /*ul li:nth-child(odd){*/
    ul li:nth-child(3){
    	/*background-color: coral;*/
    }
    
    /*E:first-of-type:父级的第一个元素*/
    li:first-of-type{
    	background: cornflowerblue;
    }
    
    /*E:last-of-type:父级的最后一个元素*/
    li:last-of-type{
    	background: chartreuse;
    }
    
    /*E F:nth-of-type(n):找到子孩子的第几个*/
    ul li:nth-of-type(2){
    	border: 10px double darkgrey;
    }
    
    /*E F:nth-last-of-type(n):子孩子中的倒数第1个同级兄弟*/
    li:nth-last-of-type(1){
    	border: 5px double red;
    }

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3][]

### 属性选择器 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4][]

页面：

a{
    	width: 60px;
    	height: 60px;
    	border: 0px solid red;
    	background: gainsboro;
    	display: block;  /*行级转换成块级*/
    	float: left;   /*浮动*/
    	margin: 5px 10px;  /*外边距*/
    	border-radius: 20%;  /* 圆角  */
    	text-align: center;  /*水平文本居中*/
    	line-height: 55px;  /*垂直居中*/
    	font-weight: bolder; /*字体加粗*/
    	text-decoration: none; /*去掉下划线*/
    	color:black;  /*字体颜色*/
    }
    
    
    /*E[attr]: E标签的属性id*/
    a[id]{
    	background: mediumaquamarine;
    }
    
    /*E[attr=val]:E标签的属性href=#*/
    a[href='#']{
    	background: chocolate;
    }
    
    
    /*E[attr^=val]:E标签的属性href的值以s开头*/
    a[href^='s']{
    	background: yellowgreen;
    }
    
    /*E[attr$=val]:E标签的属性href的值以f结尾*/
    a[href$='f']{
    	background: blueviolet;
    }
    
    /*E[attr*=val]:E标签的属性href的值包含f所有的*/
    a[href*='f']{
    	background:coral;
    }

效果：

![20190111170047540.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190111165335867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190111165530131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019011116560459.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190111165742193.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190111165815567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[20190111170047540.png]: https://img-blog.csdnimg.cn/20190111170047540.png