CSS选择器整理

最新推荐文章于 2024-07-10 10:14:49 发布

mio623

最新推荐文章于 2024-07-10 10:14:49 发布

阅读量109

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_74938150/article/details/131639910

版权

基础选择器：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* 标签选择器  通过获取标签的名称来进行设置  选中所有的p标签*/
        p {
            color: aqua;
        }

        /* id选择器 通过获取ID的属性来进行设置 使用 #+ID属性值来选中*/
        #box1 {
            color: pink;
        }

        /* 类选择器 通过获取class属性来进行设置 使用 .+class属性值来选中*/
        .box2 {
            color: blueviolet;
        }

        /* 通配符选择器 使用 * 来代指它代表的是选中了父元素中的所有内容
        *{
            
        }
        
        */
        /* 优先级为：ID > class > 标签 > 通配符 */
    </style>
</head>

<body>
    <p>我是一段文字</p>
    <div id="box1">我是盒子一</div>
    <div class="box2">我是盒子2</div>
    <div class="box2">我是盒子3</div>

    <p>我是一段文字</p>

</body>

包含选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 子代选择器  通过获取某个标签的第一级子标签来设置。格式为：标签.属性值>子标签{} 选中亲生儿子*/
        .a>li {
            background-color: pink;
        }

        /* 后代选择器 通过获取的某个标签里面所有的子标签来设置。格式为：.属性名 二级子标签{} 找到后代所有要找的元素*/
        .a li {
            color: blueviolet;
        }
    </style>
</head>

<body>

    <ul class="a">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <ul>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </ul>

</body>

复合选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 也叫做逗号选择器，可以同时设置多个标签，使用逗号进行分割。 -->
    <style>
        /* div {
            color: pink;
        }

        p {
            color: pink;
        }

        span {
            color: pink;
        } */
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>wisjiajsskmx</div>
    <p>cndklcdsmc</p>
    <span>jnckdsmc</span>
    <ul>
        <li>吃饱穿暖CNBCCDC</li>
    </ul>
</body>

属性选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        input {
            background-color: pink;
        }
        /*选中type属性的值为password的input标签*/
        input[type="password"] {
            background-color: aquamarine;
        }
        /*选中含有id属性的div标签*/
        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }
        /* type$="1"  以1 结尾 */
        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        input {
            background-color: pink;
        }
        /*选中type属性的值为password的input标签*/
        input[type="password"] {
            background-color: aquamarine;
        }
        /*选中含有id属性的div标签*/
        div[id] {
            width: 300px;
            height: 300px;
            background-color: blue;
        }

        /* type^="te"以te开头 */
        input[type^="te"] {
            background-color: red;
        }
        /* type$="1"  以1 结尾 */
        input[type$="l"] {
            background-color: green;
        }

        /* type*="e"    type值里边包含e */
        input[type*="e"] {
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <input type="text"><br />
    <input type="password"><br />
    <input type="search"><br />
    <input type="url"><br />
    <input type="number"><br />

    <div id="aquamarine">1</div>
    <div>2</div>


</body>

伪元素选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 元素的开始 */
        ul li::before {         
            content: ">";
        }
        /* 元素的最后 */
        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>1dcdscdscdcd</li>
        <li>2cdcdcdcdc</li>
        <li>3cdcdscdsc</li>
        <li>4cdcdcdcddcds</li>

    </ul>
</body>

mio623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器整理

* id选择器通过获取ID的属性来进行设置使用 #+ID属性值来选中*//* 标签选择器通过获取标签的名称来进行设置选中所有的p标签*//*选中type属性的值为password的input标签*//*选中type属性的值为password的input标签*//* type*="e" type值里边包含e *//* type*="e" type值里边包含e *//* type$="1" 以1 结尾 *//*选中含有id属性的div标签*//*选中含有id属性的div标签*/
复制链接

扫一扫