css属性选择器

最新推荐文章于 2024-09-05 22:06:38 发布

零OO

最新推荐文章于 2024-09-05 22:06:38 发布

阅读量335

点赞数

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

本文链接：https://blog.csdn.net/qq_39111074/article/details/119889241

版权

前端专栏收录该内容

222 篇文章 8 订阅

订阅专栏

以前都是通过设置class或者id属性来进行标签选择，class属性有时需要设置复合名称，css属性可以使用属性选择器，更简单的进行标签选择

css属性选择器使用方法

1.标签名[属性名]- - -标签名相同，要选择的标签有某个属性，但是其他标签没有

2.标签名[属性名=属性值]- - - 标签名相同，都具有某个属性，但是属性值不同

3.标签名[属性名^=×××]- - -标签名相同，都具有某个属性，选择属性值以×××开头的

4.标签名[属性名$=×××]- - -标签名相同，都具有某个属性，选择属性值以×××结尾的

5.标签名[属性名*=×××]- - -标签名相同，都具有某个属性，选择属性值中包含×××的

代码示例：

<!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>css属性选择器</title>
    <style>
        /* 选择单独有name属性的p标签 */
        
        p[name] {
            color: pink;
        }
        /* 选择type属性等于text的input标签 */
        
        input[type=text] {
            color: pink;
        }
        /* 给所有div定义宽高 */
        
        div {
            width: 50px;
            height: 50px;
        }
        /* div都有class属性，选择class属性值为icon1的 */
        
        div[class=icon1] {
            background-color: pink;
        }
        /* div都有class属性，选择class属性值为icon2的 */
        
        div[class=icon2] {
            background-color: green;
        }
        /* div都有class属性，选择class属性值为icon3的 */
        
        div[class=icon3] {
            background-color: yellow;
        }
        /* div都有class属性，选择class属性值为icon4的 */
        
        div[class=icon4] {
            background-color: rgb(184, 180, 180);
        }
        /* 当li都有name属性，选择name属性值以fruit开头的 ，^ 表示开头*/
        
        li[name^=fruit] {
            color: pink;
        }
        /* 当li都有name属性，选择name属性值以fruit结尾的 ， $ 表示结尾*/
        
        li[name$=fruit] {
            color: green;
        }
        /* 当li都有name属性，选择name属性值包含fruit的 ， * 表示所有位置*/
        
        li[name*=like] {
            color: rgb(241, 148, 164)
        }
    </style>
</head>

<body>
    <p name="eat">你喜欢的食物是什么？</p>
    <p>你喜欢的颜色是什么？</p>

    <input type="text">
    <input type="password">

    <div class="icon1">春</div>
    <div class="icon2">夏</div>
    <div class="icon3">秋</div>
    <div class="icon4">冬</div>

    <ul>
        <li name="fruit1">苹果</li>
        <li name="fruit2">梨子</li>
        <li name="fruit3">香蕉</li>
        <li name="4fruit">橙子</li>
        <li name="5fruit">草莓</li>
        <li name="6fruit">榴莲</li>
    </ul>

    <ul>
        <li name="i-like-sport">跑步</li>
        <li name="i-like-painting">绘画</li>
        <li name="i-like-sing">唱歌</li>
        <li name="i-like-food">美食</li>
        <li name="i-like-handmade">手工</li>
    </ul>
</body>

</html>