Day 06 CSS <复合选择器>

CSS的选择器分为基础选择器以及复合选择器
本日将将继续说明复合选择器

复合选择器可以更准确更高效的选择元素(标签)

• 是由两个或多个基础选择器透过不同方式组合而成
• 常用的复合选择器 : 後代选择器、子选择器、并集选择器、伪类选择器等

1. 後代选择器

又称为包含选择器，可以选择父元素里面的子元素

元素1 元素2 { 样式
}
/*上述语法表示选择1里面的所有元素2(後代元素)*/

ex:
ul li{ color: red}

/* ul和li中间用空格隔开
ul是父级元素 li是子级元素 最终选择的是ul里面的li */

ex:
div ul li{ color: red} (选定div内lu标签内的li标签)

/* 也可以三个元素这样使用，最终也会选定到li
或是 div li { color: red} (这样的意思也是选定div里面的li标签)
*/

备注 :

• 也可加class 使用.div il li a选择器

2. 子选择器

子元素选择器只会选择最近一级子元素

元素1 > 元素2{
}
div >p {　样式
｝
/* 选择div里面最近一级p元素*/

备注:

• 元素1和元素2中间用>隔开
• 元素1是父级 元素2是子级 最终选择的是元素2
• 元素2必须是亲儿子其他的都不归此选择器管

3.并级选择器

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

并级选择器用法:
将各选择器通过，连接而成，任何形式的选择器皆可使用

元素1,元素2{样式声明}
ex:
ul,div{ color: red}
ex:
div,table,ul,li{color:blue}
四个标签内所有的字体颜色都改为蓝色

4.伪类选择器
伪类选择器书写的特点是用冒号:表示比如:hover , :first-child

连接伪类选择器
a:link 选择未被访问的连接
a:visited 选择已被访问的连接
a:hover 选择滑鼠指针位於其上的连接
a:active 选择活动连接(滑鼠按下未弹起的

/* a 是标签选择器 所有的连接 */
a{
color : gray;
}
/* :hover是连接伪类选择器 鼠标经过*/
a:hover{
color: red;
}

:force 伪类选择器

用於选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取
所以此选择器主要针对於表单元素

input:focus{
background-color:yellow;
}