[CSS]复合选择器

复合选择器：由基础选择器组合形成。

包括：后代选择器、子选择器、并集选择器、伪类选择器。

*本文中提到的元素1、元素2、元素3可以是任意基础选择器。

 

后代选择器

使用空格隔开

元素1 元素2 { }
元素1 元素2 元素3 { }
元素1 元素3 { }

<元素1>
    <元素2>
        <元素3>
                something here
        </元素3>
    </元素2>
</元素1>

注：1. 后代选择器可以选择子代，也可以选择孙代。只要是任意后代即可。

　　2. 如果是孙代或者更多层级后代，可以一层层写，也可以只写第一层和最后一层。

 

 子选择器

使用大于号隔开

元素1>元素2 { }
<元素1>
    <元素2>
         something here
    </元素2>
</元素1>

注： 只能选最近一级的子元素。不可选更多层级。

 

并集选择器

使用逗号隔开

元素1,元素2,元素3 { }

<元素1>
         something here
</元素1> 
<元素2>
         something here    
</元素2>
<元素3>
         something here
</元素3>

注： 可选择多组元素，最后一个选择器不需要加逗号。

 

伪类选择器

使用冒号隔开

/* 链接伪类选择器 */
a:link { }           未被访问过的链接
a:visited { }　　   　已被访问过的链接
a:hover { }          鼠标悬停的链接
a:active { }         鼠标按下未弹起的链接

/* focus伪类选择器 */
input:focus { }     选取获得焦点的表单元素

注：1. 为确保链接伪类选择器生效，link-visited-hover-active选择器需按顺序声明。

　　2. <a>标签有默认样式，无法在给<body>标签定义样式时被定义到，必须单独声明样式。

　　3. 实际开发中通常只用a{ }及a:hover{ }，其余较少用。

 

以下表格摘自黑马程序员网课教程：

posted @ 2021-04-27 11:01  夕苜19  阅读(86)  评论(0)  编辑  收藏  举报