CSS复合选择器

最新推荐文章于 2024-03-07 00:02:51 发布

原创最新推荐文章于 2024-03-07 00:02:51 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

27 篇文章

订阅专栏

1、后代选择器

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

元素1 `空格` 元素2 {样式声明}

特点：

只要是后代都可以选择，例如：元素1 元素2 元素3 {样式声明}
元素可以是任意的基础选择器，例如： .father .son {样式声明}
空格分隔，最终作用于元素2

代码示例如下：

<head>
	<style>
		ol li {		
            color: #ff0000;
		}
	</style>
</head>


<body>
	<ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>   
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>  
</body>

2、子元素选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是亲儿子元素
语法：

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

特点：

元素2必须是亲儿子，其孙子、重孙子子类都不归它管
元素可以是任意的基础选择器，例如： .father > a {样式声明}
>分隔，最终作用于元素2

代码示例如下：

<head>
	<style>
		.nav>a {
			color: red;
		}
	</style>
</head>


<body>
	<div class="nav">
		<a href="#">儿子标签</a>
		<p>
			<a href="#">孙子标签</a>
		</p>
	</div>
</body>

3、并集选择器

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

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

特点：

,分隔，作用于元素1和元素2
逗号可以理解为和的意思
并集选择器通常用于集体声明

代码示例如下：

<head>
	<style>
		div , p , .pig li {
			color: red
		}
	</style>
</head>


<body>
	<div>熊大</div>
	<p>熊二</p>
	<span>光头强</span>
	<ul class="pig">
		<li>小猪佩奇</li>
		<li>猪爸爸</li>
		<li>猪妈妈</li>
	</ul>
</body>

4、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（：）表示，比如:hover、:first:child

4.1、链接伪类选择器

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

注意事项：

为了确保生效，请安装LVHA的顺序声明：:link - :visited - :hover - :active

4.2、:focus伪类选择器

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

input:focus {
	background-color: yellow;
}

5、复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	选择后代元素	可以是子孙后代	较多	符号是‘空格’ `.nav a{}`
子元素选择器	选择最近一级元素	只选亲儿子	较少	符号是‘大于’ `.nav>p`
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是‘逗号’ `.nav,p`
链接伪类选择器	选择不同状态的链接	跟链接有关	较多	重点基础`a{}`和`a:hover{}`
:focus选择器	选择获得光标的表单	跟表单相关	较少	`input:focus`记住这个写法