6-前端笔记-CSS-复合选择器

最新推荐文章于 2023-03-18 22:42:27 发布

MY Daisy

最新推荐文章于 2023-03-18 22:42:27 发布

阅读量317

点赞数

分类专栏：前端-css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/Ambition_ZM/article/details/128022292

版权

前端-css 专栏收录该内容

35 篇文章 2 订阅

订阅专栏

1、什么是复合选择器

复合选择器由两个及两个以上的基础选择器组合而成。常用的复合选择器包括：
后代选择器、子选择器、并集选择器、伪类选择器

2、后代选择器（**）

也叫包含选择器，可以选择父元素里面的子元素，语法为把外层标签写在前面，内层标签写后面，中间用空格分隔，当标签发生嵌套时，内存标签就是外层标签的后代。
语法：
表示选择元素1里的所有元素2，只对元素2进行样式设置

元素1 元素2{
	属性1: 属性值1;
}

练习：将无序列表中li元素的字体设置为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>ul的小li</li>
        <li>ul的小li</li>
        <li>ul的小li</li>
    </ul>
    <ol>
        <li>ol的小li</li>
        <li>ol的小li</li>
        <li>ol的小li</li>
    </ol>
</body>
</html>

在这里插入图片描述

练习2：将第一组的ul设置为红色，第2组无序列表设置为绿色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li {
            color: red;
        }

        .nav li {
            color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>ul的小li</li>
        <li>ul的小li</li>
        <li>ul的小li</li>
    </ul>
    <ul class="nav">
        <li>ul的小li</li>
        <li>ul的小li</li>
        <li>ul的小li</li>
    </ul>
    <ol>
        <li>ol的小li</li>
        <li>ol的小li</li>
        <li>ol的小li</li>
    </ol>
</body>

</html>

在这里插入图片描述

3、子选择器（**）

也叫子元素选择器，只能选择作为某元素的最近一级子元素，只能是亲儿子
语法：元素1是父级，元素2是子级

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

练习：设置“亲儿子”的链接字体颜色为红色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">亲儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div>
</body>

</html>

在这里插入图片描述

3、并集选择器

可以选择多组标签，同时为他们定义相同样式，通常用于集体声明。将各选择器通过英文逗号连接而成，任何形式的选择器都可以成为并集选择器的一部分

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

会改变元素1和元素2的样式
练习：
将熊大一家和小猪佩奇一家字体设置为绿色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>p,
        span,
        ul li {
            color: green;
        }
    </style>
</head>

<body>
    <div>
        <p>熊大</p> <br />
        <span>🐻二</span>
    </div>
    <p>光头强</p>
    <ul>
        <li>小猪佩奇</li>
        <li>小猪爸爸</li>
        <li>小猪妈妈</li>
    </ul>
</body>

</html>

在这里插入图片描述

4、伪类选择器

用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，第n个元素
用冒号（:）表示
分类：链接伪类、focus伪类

4.1 链接伪类

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

注意事项：
为确保生效，按照LVHA的顺序声明,不止是a标签可以，其他标签也可用，一般常用到a标签上
先写a{},再写a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
        a:link{
            color: black;
        }
        a:visited{
            color: brown;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
         p:hover{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <a href="#">点击跳转</a>
    <p>sss</p>
</body>
</html>

在这里插入图片描述

4.2 focus 伪类选择器

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

input:foucus{
	background-color:yellow;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus{
            color: green;
            background: pink;
        }
    </style>
</head>
<body>
    <input type="text">身份证
    <input type="text">姓名
</body>
</html>