CSS 3 复合选择器

帝吃藕和

已于 2023-11-21 09:46:52 修改

阅读量42

点赞数

分类专栏： HTML+CSS 文章标签：前端 html css

于 2023-11-21 09:10:39 首次发布

本文链接：https://blog.csdn.net/weixin_55932637/article/details/134523173

版权

HTML+CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的四种基本选择器：后代选择器、子选择器、并集选择器和伪类选择器，包括link、visited、hover、active和:focus状态的应用。通过实例展示了如何使用这些选择器来控制HTML元素的样式。

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

一.后代选择器 (ul li a )

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

元素1 父级，元素2是子级 (儿子，孙子，只要是后代就行)

元素1 和元素2之间有空格

</head> 
   <style>
        /* 后代选择器 */
        ol li {
            color: pink;
        }
        ol li a {
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol的li</li>
        <li>我是ol的li</li>
        <li><a href="#">孙子</a></li>
    </ol>

多个相同的ul怎么办？用类选择器

<head>

    <style>
        /* 后代选择器 */
        .div li {
            color: blue;
        }

    </style>
</head>
<body>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
    <ul class="div">
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
    <ul>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
        <li>我是ul的li</li>
    </ul>
</body>

二.子选择器 (>)

最近一级的选择器，选择亲儿子元素

都是红色，如果不想让孙子变成红色，使用子选择器(>)

   <style>
        /* 子选择器 */
        .nav > a {
            color: red;
        }
      

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

三.并集选择器 (,)

选择多个标签，定义相同的样式，通常用于集体声明

<style>
        div,
        p, 
        .pig li {
            color: palevioletred;
        }
        
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>小猪佩奇2</li>
        <li>小猪佩奇3</li>
    </ul>
</body>

!最后一个选择器不加逗号

四.伪类选择器(:)

链接伪类 (a:hover)

link 未访问的链接

鼠标经过链接，变颜色

visited 访问后变色

hover鼠标经过变色

active: 点击变色

注意事项:

1.按照顺序 link-visted-hover-active (记忆法:LV hao)

2.单独给a指定样式,给body没有用

3.一般都是黑色链接，鼠标经过变个颜色

 <style>
        a {
            color: gray;
            text-decoration: none;
        }
        a:hover {
            color: red;
        }
        
    </style>

:focus 伪类选择器

把获得光标的input表单选取出来

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