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元素