css复合选择器

CSS复合选择器

复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的

复合选择器可以更加准确、高效的选择目标元素（标签）

复合选择器是有两个或者多个基础选择器，通过不同的方式组合而成的

常用复合选择器包括，后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签紫萼在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

语法

元素1 元素2 {样式声明}

上述语法表示选择元素1中所有的元素2（后代元素）

元素1和元素2 中间用空格隔开

元素1是父级，元素2是子级 最终选择的是元素2

元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可

 

子选择器

子元素选择器只能选择作为某元素最近的一级子元素。简单理解就是亲儿子元素

语法

元素1>元素2{样式声明}

上述语法表示选择元素1里面的所有直接后代（子元素） 元素2

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子、重孙之类不归他管

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用语集体声明

并集选择器是个选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法

元素1 ，元素2 { 样式声明}

规范

并集选择器喜欢竖着写

最后一个选择器后面不需要加逗号

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第一个，第N个元素。

伪类选择器书写的最大特点就是用冒号表示，比如 :hover和 :first-child

链接伪类选择器

a:link  选择所有未被访问过得链接

a:visited  选择所有已被访问过的链接

a:hover  选择鼠标指针位于其上的链接

a:active  选择活动链接（鼠标按下未弹起的链接）

注意事项： 1.为了确保链接伪类生效，尽量按照 link visited hover active 的顺序

    2.因为a链接在了浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类的实际写法

a {

    color:gray;

}



a:hover {

    color:red; 鼠标经过由灰色编程红色 

}

 

：focus伪类选择器

用于选取获取焦点的表单元素

焦点就是光标，一般情况下只有<input>类表单才能获取，因此这个选择器也主要针对与表单元素来说

input:focus {
    background-color: yellow;

}