2：选择器-2.1属性选择器

来源：互联网发布：京东搜索优化编辑：程序博客网时间：2024/06/13 21:49

其特点是通过属性来选择元素，具体有以下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>

***相应效果

阅读全文

0 0