css选择器

Ll Lin

已于 2023-10-26 11:41:30 修改

阅读量47

点赞数

分类专栏： web前端文章标签： css css3 html5

于 2023-07-22 17:54:14 首次发布

本文链接：https://blog.csdn.net/m0_74852435/article/details/131870044

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.基础选择器

1.标签选择器

标签名{

属性：；

}

2.id选择器

# id值 {

}

3.类选择器

. 类名{

}

4.通配符选择器

选中所有元素

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器:选中当前页面中所有符合标签 */
        h1 {
            color: rgb(32, 27, 28);
        }

        /* id选择器   #id*/
        #box1 {
            color: rgb(6, 106, 194);
        }

        /* 类选择器   .类名 */
        .box1 {
            background-color: pink;
        }

        /* 通配符选择器  选中所有的元素*/
        * {
            font-size: 60px;
        }
    </style>
</head>

<body>
    <div>我是一个不允许编辑的盒子</div>
    <p>我是一段文字</p>
    <h1 class="box1">我是标题</h1>
    <div id="box1">我是一个不允许编辑的盒子</div>
    <div class="box1">我是一个不允许编辑的盒子</div>


</body>

</html>

2.包含选择器

1.子代选择器

只能选中嵌套的第一层

标签名>被嵌套的标签名{

}

2.后代选择器

能够选中嵌套的所有

标签名 (空格) 被嵌套的标签名{

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器   只选中亲生儿子 */
        ul>li {
            background-color: pink;
        }

        /* 后代选择器 */
        /* css样式表存在层叠性，后边的会将前边的覆盖掉 */
        ul li {
            background-color: aqua;
        }

        ul div>li {
            background-color: brown;
        }
    </style>
</head>

<body>
    <ul>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <li>我是一个li</li>
        <div>
            <li> </li>
            <li> </li>

        </div>

    </ul>
</body>

</html>

3.逗号（复合）选择器

标签1，

标签2，

标签3{

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div {
            background-color: pink;
        }

        h1 {
            background-color: pink;

        }

        p {
            background-color: pink;

        } */

        /* 复合选择器 */
        div,
        p,
        h1 {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>我是一个div</div>
    <p>我是小p</p>
    <h1>我是标题</h1>
</body>

</html>

4.属性选择器

标签名[属性名="属性值"]{

}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="text"] {
            background-color: pink;
        }

        input[type="password"] {
            background-color: aqua;
        }

        input[name] {
            background-color: red;
        }

        /*   *type的属性值里包含e的input元素 
        */
        input[type*="e"] {
            background-color: blueviolet;
        }

         /*   *type的属性值里以p开头的input元素 
        */
        input[type^="p"] {
            background-color: chartreuse;
        }

         /*   *type的属性值里以l结尾的input元素 
        */
        input[type$="l"] {
            background-color: red;
        }
    </style>
</head>

<body>
    <form action="#">
        <input type="text">
        <input type="password">
        <input type="email" name="email">
        <input type="number">
    </form>
</body>

</html>

5.伪类选择器

设置元素在不同状态下的样式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a:link 、a:visited 、a:hover 、a:active */
        /* 伪类选择器：元素在不同状态下的样式 */
        /* ：link    为访问的来凝结样式 */
        a:link {
            color: green;
        }


        /* 访问之后的样式 */
        a:visited {
            color: red;
        }


        /* 获取焦点时的样式 */
        a:focus {
            color: blue;
        }


        /* 鼠标悬停时的样式 */
        /*  +表示下一个
            ~表示之后所有的兄弟元素 */

        a:hover+div {
            color: pink;
        }

        /* active     用户点击之后按住鼠标 */
        a:active {
            background-color: pink;
        }

        div:hover {
            background-color: pink;
        }
    </style>
</head>

<body>
    <a href="#">点击我去百度

    </a>
    <div>我是一个div</div>
</body>

</html>

6.结构伪类选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:nth-child(9) {
            background-color: pink;
        }

        ul li:last-child {
            background-color: red;
        }

        ul li:first-child {
            background-color: aqua;
        }

        ul li:nth-child(2n+1) {
            background-color: blue;
        }

        ul li:nth-child(2n) {
            background-color: rgb(33, 227, 124);
        }
    </style>
</head>

<body>
    <ul>

        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
        <li>我是li7</li>
        <li>我是li8</li>
        <li>我是li9</li>
        <li>我是li10</li>
    </ul>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 先找.father，然后对所有的子元素进行排序，找到对应序号的子元素，然后再去看子元素是否满足条件（.son） */
        .father .son:nth-child(2) {
            background-color: pink;
        }


        /* 先找.father，再找.father里的.son，然后对.son进行排序 */
        .father .son:nth-of-type(2) {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <p>nihao</p>1
        <div class="son">我是盒子</div>2
        <div class="son">我是盒子</div>3
        <div class="son">我是盒子</div>4
        <div class="son">我是盒子</div>5

    </div>
</body>

</html>

7.伪元素选择器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::before {
            content: "##3#";
            color: pink;
        }

        p::after {
            content: "and you";
            color: red;
        }

        input::placeholder {

            color: pink;
        }

        div::selection {
            color: aqua;
        }
    </style>
</head>

<body>
    <p>  
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam porro libero voluptatum consectetur
        doloremque corrupti pariatur assumenda perspiciatis facere impedit, cum, autem voluptas repellendus provident
        eius et ipsum ratione laudantium!
</p>
    <p>
Corporis dicta repellat deleniti itaque blanditiis illo ipsum sed, libero quis vero, praesentium architecto hic
        dolores debitis! Incidunt fugiat sed fugit aliquid officiis fuga quo sequi rerum, voluptas qui quia!
        Iste consectetur corrupti sunt totam dolores quae provident dignissimos ipsum, odio maiores atque. Provident sit
        maxime quidem fugiat eius illo corrupti, deserunt itaque accusantium. Consequatur quisquam distinctio architecto
</p>
    <p>
Sit similique nisi pariatur molestiae obcaecati non voluptate sint. Iure veniam, ab praesentium, accusantium
        quae eligendi reiciendis ipsa ad nihil atque obcaecati aut repellendus porro optio eaque itaque non
        necessitatibus!
        Vitae facere accusantium magnam, vero architecto dolore deleniti nobis quis, recusandae, officiis culpa magni ut
        distinctio delectus odio obcaecati aspernatur! Qui optio placeat tempora recusandae explicabo aut earum
        repellendus adipisci.
</p>
    <input type="text" placeholder="请输入用户名：">
    <div>
        Quam magnam unde aperiam aliquam ut molestiae est nobis odio. Deserunt odit numquam atque modi facere
        dignissimos laborum commodi architecto incidunt, officia, eveniet autem provident nesciunt et corporis quasi
        ipsa!
        Quaerat quod sint ea nostrum voluptas repellendus, assumenda minima numquam perferendis vel officiis dolorem
        beatae nemo cum quae autem. Velit asperiores natus dolorem, et libero praesentium modi provident numquam
        exercitationem.
        Optio tempora fugiat eveniet debitis! Est unde blanditiis totam ullam quia debitis explicabo sit eaque quaerat,
        minus molestiae. Libero quo consequatur doloribus pariatur aut impedit ullam fugiat aliquid! Libero, incidunt.
        Laborum consectetur illo esse quasi voluptatem dolorum delectus eveniet. Eius nostrum non quia accusantium nam
        tempore culpa praesentium iure cumque tempora id possimus, expedita ea in quod quae odit voluptatibus?
        Laborum, a odit! Quibusdam suscipit neque architecto esse voluptate! Cupiditate, illum accusantium ipsam impedit
        suscipit exercitationem odit repudiandae repellat, voluptatibus fugiat repellendus porro tempora? Nihil et nulla
        minus reprehenderit iusto.]

    </div>
</body>

</html>