四、CSS的复合选择器
1.1什么是复合选择器?
在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。
复合选择器是由两个或多个基础选择器,通过不同方式组合而成的,可以更准确更高效的原则目标元素(标签)。
常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。
1.2后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套式,内层标签就成为外层标签的后代。
元素1 元素2(样式声明)
上述语法表示选择元素1里面的所有元素2(后代元素)
语法说明:
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2。
- 元素2可以是儿子,也可以是孙子等,只要是元素1的后代即可。
- 元素1和元素2可以是任意基础选择器。
例子:
ul li{样式声明}/*选择ul里面所有的li元素*/
1.3子选择器(重要)
定义:
子元素选择器(子选择器)只能选择作为某个元素的最近一级子元素。(简单理解就是选亲儿子元素)。
语法:
元素父>元素子{样式声明}
上述语法表示选择元素1里面的所有直接后代(子元素)元素2。
语法说明:
- 元素1和元素2中间用>号隔开。
- 元素1是父级,元素2是子级,最终选择的是元素2。
- 元素2必须是亲儿子,其孙子、重孙之类都不归他管,你也可以叫他亲儿子选择器。
例子:
div>p{样式声明}/*选择div里所有最近一级p标签元素*/
1.4并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,并集选择器,是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
语法:
元素1,元素2{样式声明}
上述语法表示选择元素1和元素2
语法说明:
- 元素1和元素2中间用英文状态下的逗号隔开。
- 逗号可以理解为和的意思。
- 并集选择器通常用于集体声明。
例子:
ul,div{样式声明}/*选择ul和div标签元素*/
1.5链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个、第n个元素。
语法:
伪类选择器书写最大的特点是用冒号(:)表示:
hover:first-child
a:link没有点击过(访问过的)链接
a:visited点击过的(访问过的)链接
a:hover鼠标经过的链接
a:active鼠标正在按下还没有弹起鼠标的那个链接
链接伪类选择器注意事项:
1.为了确保生效,请按照LVHA的循顺序声明:
link-:visited-:hover-:active
2.记忆法:love hate或者LV 包包 hao
3.因为a链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工开发中的写法:
/*a是标签选择器,所有的链接*/
a{
color
}
/*:hover是链接伪类选择器,鼠标经过*/
a:hover{
color:pink /*鼠标经过的时候,由原红变粉*/
}
1.6 focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。
焦点就是光标,一般情况下<input>类表单元素,才能获取,因此这个选择器也主要针对表单元素来说
例子:
input :focus{
back-ground-color:yellow;
}