CSS屬性選擇器

CSS屬性選擇器

CSS屬性選擇器即是通過html的屬性來選擇元素，下面來分別看下CSS的幾種元素選擇器。

1.E[att]

選擇具有att屬性的E元素

input[type]{height: 40px;background-color:red;}

<form action="">
    <input type="text" name="name" placeholder="請輸入用戶名"/>
    <input type="password" name="password" placeholder="請輸入密碼"/>
    <input type="submit" >
</form>

2.E[att=”val”]

選擇具有att屬性且屬性值等於val的E元素

 input[type = "text"]{height: 40px;background-color:red;}

<form action="">
    <input type="text" name="name" placeholder="請輸入用戶名"/>
    <input type="password" name="password" placeholder="請輸入密碼"/>
    <input type="submit" >
</form>

3.E[att~=”val”]

選擇有att屬性的元素，且屬性列表中有一個符合val的值的E元素

p[class~="p1"]{color: red}

<p class="p1 p3">段落一</p>
<p class="p1 p2 p3">段落二</p>
<p class="p2 p3">段落三</p>

4.E[att^=”val”]

選擇具有att屬性且屬性值以val開頭的E元素

p[class^="p1"]{color: red}

<p class="p1 p3">段落一</p>
<p class="p2 p1 p3">段落二</p>
<p class="p2 p3">段落三</p>

5.E[att$=”val”]

選擇具有att屬性且屬性值以val結尾的E元素

6.E[att*=”val”]

選擇具有att屬性且屬性值包含val的E元素