css的复合选择器

最新推荐文章于 2024-09-21 23:59:03 发布

Red youth

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量113

点赞数 1

分类专栏：入门基础文章标签： html css 前端

本文链接：https://blog.csdn.net/nnnnnni/article/details/126838484

版权

入门同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

基础

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的几种主要选择器：后代选择器、子代选择器、并级选择器、链接伪类选择器和:focus选择器。通过实例展示了如何使用这些选择器来改变网页元素的样式，包括修改链接的不同状态、获取焦点的表单元素等，帮助理解CSS选择器的工作原理及其在页面样式的应用。

摘要由CSDN通过智能技术生成

css的复合选择器

选择器	作用	特征	使用情况	用法
后代选择器	用来选择后代选择器	可以是子孙后代	较多	.nav a
子代选择器	选择离自己最近的子级	只选亲儿子	较少	.nav>p
并级选择器	选择相同样式的元素	可以用于集体说明	较多	.nav,.header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	记住a{}和a:hover实际开发的写法
:focus选择器	选择获得光标的表单	跟表单相关	较少	input:focus

后代选择器

<style>
    /* 把ol的li改成红色*/
    ol li{
        list-style:none;
        color:red;
        
}
    /* 把ol的a改成blue*/
    ol li a{
        color:blue;
    }
</style>
<body>
    <ol>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li>ol的孩子</li>
       <li><a href "#">ol的孙子</a></li>
    </ol>
    <ul>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
        <li>ul的孩子</li>
    </ul>
</body>

元素ol 和元素li 中间用空格隔开
元素li可以是儿子也可以是孙子

子代选择器

<style>
    div>a{
        
    }
</style>
<body>
    <div>
        <a href= "#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

元素div和元素a 用> 隔开
元素a必须是元素div儿子级的其他的不归他管

并集选择器

<style>
    /* 把鸡狗改成红色 */
    div,p{
        color:red;
    }
    /* 把鸡狗改成红色 小猪一家改红色*/
    div,p,.pig li{
        color:red;
    }
</style>
<body>
    <div>
        鸡
    </div>
    <p>
        狗
    </p>
    <span> 兔</span>
    <ul class="pig">
        <li>小猪</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

并集选择器可以多组标签
元素用英文逗号隔开

链接连接器

a:link：选择所有未被访问的链接

a:visited：选择所有已被访问的链接

a:hover：选择鼠标位于其上的链接

a:active：选择活动链接

<style>
    /* 未访问的链接*/
    a:link{
        color:#333;
    }
    /*访问过的链接*/
    a:visited{
        color:red;
    }
    /* 选择鼠标经过的那个链接*/
    a:hover{
        color:blue;
    }
    /* 选择是我们的鼠标按下还没有弹起的链接*/
    a:active{
        color:#369;
    }
</style>
<doby>
    <a href="#">链接</a>
</doby>

为了确保生效，清按照LVHA的顺序声明:link :visited :hover :active.

伪类选择器

:focus ：伪类选择器用于选取获得焦点元素

<style>
    /*获得光标的input表单元素选取出来*/
    input:focus{
        background-color: red;
        color: blue;
    }
</style>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>