2：选择器-2.1属性选择器_vue html根据判断选择属性-优快云博客

本文详细介绍了CSS中基于属性的选择器类型及其应用实例，包括精确匹配、部分匹配及位置匹配等场景，帮助读者掌握更精准的样式控制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其特点是通过属性来选择元素，具体有以下5种形式：

选择器	示例	含义
E[attr]		存在attr属性即可
E[attr=val]		属性值完全等于val
*E[attr=val]**		属性值里包含val字符并且在“任意”位置
E[attr^=val]		属性值里包含val字符并且在“开始”位置
E[attr$=val]		属性值里包含val字符并且在“结束”位置

2.1.1 E[att]：选择具有att属性的E元素

<style>

img[alt^=“5”]{

margin:10px;

}

</style>

此例，将会命中第一张图片，因为匹配到了alt属性

2.1.2E[att=”val”]：选择具有att属性并且属性值等于val的元素

<style>

input[type="text"]{

border: 2px solid #000;

}

</style>

<inputtype="text" />

<inputtype="submit" />

此例，将会命中第一个input，因为匹配到了alt属性，并且属性值为text

2.1.3E[att~="val"]：选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

<style>

div[class~="a"]{

border: 2px solid #000;

}

</style>

<divclass="a">1</div>

<divclass="b">2</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值中有一个值为a

2.1.4E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。

<style>

div[class^="a"]{

border: 2px solid #000;

}

</style>

<divclass="abc">1</div>

<divclass="acb">2</div>

<divclass="bac">3</div>

此例，将会命中1, 2两个div，因为匹配到了class属性，且属性值以a开头

2.1.5：E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。

<style>

div[class$="c"]{

border: 2px solid #000;

}

</style>

<divclass="abc">1</div>

<divclass="acb">2</div>

<divclass="bac">3</div>

此例，将会命中1, 3两个div，因为匹配到了class属性，且属性值以c结尾

2.1.6：E[att*="val"] ：选择具有att属性且属性值为包含val的字符串的E元素。

<style>

div[class*="ab"]{

border: 2px solid #000;

}

</style>

<divclass="acb">2</div>

<divclass="bac">3</div>

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了a b的1满足条件

2.1.7：E[att|="val"] ：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的<style>

<style>

div[class|="a"]{

border: 2px solid #000;

}

</style>

<divclass="a-test">1</div>

<divclass="b-test">2</div>

<divclass="c-test">3</div>

此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头

***相关代码（Day5-14其他伪类选择器.html）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            background: orange;
            min-height: 30px;
        }
        /*        E:empty让空的元素消失*/
        
        p:empty {
            display: none;
        }
        
        :target {
            /*这里的:target就是指id="brand"的div对象*/
            width: 200px;
            height: 200px;
            border: 2px solid red;
            background-color: red;
        }
        
        form {
            width: 200px;
            margin: 20px auto;
        }
        
        div {
            margin-bottom: 20px;
        }
        
        input:not([type="submit"]) {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <p>我是一个段落</p>
    <p> </p>
    <p></p>


    <h2><a href="#brand1">Brand</a></h2>
    <div class="menuSection" id="brand">
        content for Brand
    </div>

    <div id="brand1">
        content for Brand1
    </div>
    <form action="#">
        <div>
            <label for="name">Text Input:</label>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <label for="name">Password Input:</label>
            <input type="text" name="name" id="name" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>
</body>

</html>

***相应效果

***相关代码（伪类选择器2.html）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*        匹配第二个元素，并且这个元素是p*/
        
        p:nth-child(2) {
            color: #f00;
        }
        
        p:nth-child(3) {
            color: green;
        }
        
        p:nth-child(4) {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        <p>第1个p</p>
        <p>第2个p</p>
        <span>第1个span</span>
        <p>第3个p</p>
        <span>第2个span</span>
        <p>第4个p</p>
        <p>第5个p</p>
    </div>
</body>

</html>

***相应效果

***相关代码(伪类选择器奇数和偶数2.html)

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li:nth-child(2n) {
            color: red;
        }
        
        li:nth-child(2n+1) {
            color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
</body>

</html>

***相应效果

***相关代码（伪类选择器first-child和last-child）

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*        E:first-child:其父元素的第一个子元素，并且这个子元素是E*/
        
        li:first-child {
            color: red;
        }
        
        p:last-child {
            color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
    <ul>
        <li>列表项一</li>
        <li>列表项二</li>
        <li>列表项三</li>
        <li>列表项四</li>
    </ul>
    <div>
        <h2>我是一个标题</h2>
        <p>我是一个p</p>
    </div>
</body>

</html>

***相应效果