css复合选择器

10个月前 (08-01) 756次浏览 已收录 1个评论

后代选择器(重要)

定义:它可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代。

语法:
元素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>后代选择器</title>
    <style>
        /*改的是所有li的样式*/
        ol li {
            color: red;
        }

        ol a {
            color: green;
        }

        /*针对性设置*/
        .huangse li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a>我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <ul class="huangse">
        <li><a>我是黄色</a></li>
    </ul>
</body>

</html>
结果演示

子选择器(重点)

定义:只能选择某元素的最近一级子元素,简单理解就是选择亲儿子元素。

语法:
元素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>子选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a>我是儿子</a>
        <p>
            <a>我是孙子</a>
        </p>
    </div>
</body>

</html>
结果演示

并集选择器(重点)

定义:可以选择多组标签,同时为他们定义相同的样式。

语法:
元素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>并集选择器</title>
    <style>
        div,
        p,
        .c li {
            color: red;
        }
    </style>
</head>

<body>
    <div>1</div>
    <p>2</p>
    <span>3</span>
    <ul class="c">
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>
</body>

</html>
结果演示

伪类选择器

定义:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第几个元素。伪类选择器有很多种,有链接伪类,结构伪类等。

链接伪类

  • a:link 选择所有未被访问的链接
  • a:visited 选择所有已被访问的链接
  • a:hover 选择指针停到的链接
  • a:active 选择活动链接(鼠标按下后未弹起的链接)
必须按照lvha的顺序声明:link-visited-hover-active
<!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>伪类选择器之伪类选择器之链接伪类</title>
    <style>
        /*未访问的链接*/
        a:link {
            color: #333;
            text-decoration: none;
        }

        /*访问过的链接*/
        a:visited {
            color: red;


        }

        /*鼠标悬停的链接*/
        a:hover {
            color: green;


        }

        /*鼠标按下后未弹起的链接*/
        a:active {
            color: blue;


        }
    </style>
</head>

<body>
    <a href="#">王学龙</a>
</body>

</html>
结果演示

:focus伪类选择器

定义:用于选取获得焦点(光标)的表单元素。只针对input类表单元素。

<!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>:focus伪类选择器</title>
    <style>
        /*把获得光标的input表单元素选取出来*/
        input:focus {
            background-color: blue;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:css复合选择器
喜欢 (2)

您必须 登录 才能发表评论!

(1)个小伙伴在吐槽
  1. 我已经看了6篇文章了
    2021-08-08 21:24