CSS: 选择器（二）复合选择器

什么是复合选择器

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

• 复合选择器可以更准确、更高效的选择目标元素（标签）
• 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

后代选择器

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

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

• 元素1和元素2中间用空格隔开
• 元素1是父级，元素2是子级，最终选择的是元素2
• 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。即后代选择器会更改父元素的所有后代元素，这点与子选择器对比。
• 元素1和元素2可以是任意的基础选择器

如：    nav  ul  li{......}  

---

 

子选择器

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

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

 

---

 

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成

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

任何形式的选择器都可以作为并集选择器的一部分。

如：p , div , .nav li {}

 

---

 

伪类选择器

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

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

链接伪类选择器

 

 

 

 

---

 

 

 

：focus伪类选择器

：focus伪类选择器用于选取获得焦点的表单元素。

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

input:focus{

　　background-color: yellow;

}