CSS的复合选择器¶

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

选择器	作用	特征	隔开符号	用法
后代选择器	用来选择后代元素	可以选择低于这一级别的	空格	.nav a{}
子代选择器	选择最近一级元素	只选择下一级别	大于	.nav>p{}
并集选择器	选择某些相同样式的元素	可以用于集体声明	逗号	.nav,.header{}
链接伪类选择器	选择不同状态的链接	和链接相关		a{} a:hover
:focus选择器	选择获得光标的表单	和表单相关		Input:focus

¶

一、后代选择器（包含选择器）¶

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

对元素2操作选择元素1里面的所有元素2（后代元素）注意： 1，元素1和元素2 空格分开 2，元素1父级，元素2子集，最终选择的是元素2 3，元素2只要是元素1后代即可 4，元素1，元素2可以是任意基础选择器

<head>

<style>

/* 我想要把ol里面的小li选出来改为pink */

ol li {

color: pink;

}

/* 中国山东济南蓝翔 */

ol li a {

color: red;

}

.nav li a {

color: yellow;

}

</style>

</head>

<body>

<ol>

变态写法

</ol>

<ul>

<li><a href="#">不会变化的</a></li>

</ul>

<li><a href="#">不会变化的</a></li>

</ul>

<\body>

二．子代选择器¶

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

元素2是元素1的直接后代，选择最近一级的子元素 Eg。div>p{样式声明} 注意 1，元素1和元素2中间大于号隔开 2，元素1父级，元素2子集，最终选择元素2

三、并集选择器¶

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

可以选择多组标签，同时为他们定义相同样式，集体声明

<head>

….

<style>

/* 要求: 请把熊大和熊二改为粉色还有小猪一家改为粉色 */

div,

p,

.pig li {

color: pink;

}

</style>

</head>

<body>

</ul>

</body>

注意 1，约定的语法规范,我们并集选择器喜欢竖着写 2，一定要注意,最后一个选择器不需要加逗号

四、伪类选择器¶

用于给某类选择器添加特殊效果 ==最大特点是用冒号表示== 有很多种，重点看链接伪类、结构伪类

1、链接伪类选择器¶

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a: hover	选择鼠标指针位于其上的链接
a: active	选择活动链接（鼠标按下未弹起的链接）

/* 1.未访问的链接 a:link 把没有点击过的(访问过的)链接选出来 */

a:link {

color: #333;

text-decoration: none;

}

/*2. a:visited 选择点击过的(访问过的)链接 */

a:visited {

color: orange;

}

/*3. a:hover 选择鼠标经过的那个链接 */

a:hover {

color: skyblue;

}

/* 4. a:active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */

a:active {

color: green;

}

注意 ==1：严格按照LVHA顺序书写 link-visited-hover-active== 2给链接指定样式要单独指定 3.实际开发写法

2.：focus伪类选择器¶

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

<head>

...

<title>focus伪类选择器</title>

<style>

/* // 把获得光标的input表单元素选取出来 */

input:focus {

background-color: pink;

color: red;

}

</style>

</head>

<body>

</body>

五、总结¶

选择器	作用	特征	隔开符号	用法
后代选择器	用来选择后代元素	可以选择低于这一级别的	空格	.nav a{}
子代选择器	选择最近一级元素	只选择下一级别	大于	.nav>p{}
并集选择器	选择某些相同样式的元素	可以用于集体声明	逗号	.nav,.header{}
链接伪类选择器	选择不同状态的链接	和链接相关		a{} a:hover
:focus选择器	选择获得光标的表单	和表单相关		Input:focus