CSS3属性选择器

1.以input标签示例CSS3样式

代码：

input{
background-color: #33ddff;
}

<input type="text" name="username" class="username" value="sybil"><br>
<input type="text" name="middle name"><br>
<input type="text" name="lastname" class="lastname" value="Lee"><br>
<input type="text" name="chinesename">

运行效果：



分析：所有input标签的背景颜色都变成了蓝色，如果想要部分变色，则CSS3样式代码替换为：

/*设置所有含有class属性的input标签的属性*/
input[class]{
background-color: #bc4f70;
}

运行效果如下：



2.[]表示属性

/*所有class为firstname的标签*/
[class='username']{
background-color: #bc4f70;
}

<input type="text" name="username" class="username" value="sybil"><br>
<input type="text" name="middle name"><br>
<input type="text" name="lastname" class="lastname" value="Lee"><br>
<input type="text" name="chinesename">
<p class="username">My first CSS3 test</p>  //新增加了p标签，class="username"

运行结果：



4.所有name属性的值以user开头的input标签（注意：下面的HTML代码稍有变动，与上面的相比）

/*name以user开头的input标签*/
input[name^=user]{
background-color: #bc4f70;
}

<input type="text" name="username" class="username" value="sybil"><br>
<input type="text" name="middlename"><br>
<input type="text" name="lastname" class="lastname" value="Lee"><br>
<input type="text" name="usercity">
<p class="username">My first CSS3 test<
d790
span style="color:#e84f6b"></p>     <!--新增加了p标签，class="username"-->

运行结果如下：



5.name属性以name结束的input标签：

/*name属性的值以name结束的input标签*/
input[name$=name]{
background-color: #bc4f70;
}

<input type="text" name="username" class="username" value="sybil"><br>
<input type="text" name="middlename"><br>
<input type="text" name="lastname" class="lastname" value="Lee"><br>
<input type="text" name="usercity">
<p class="username">My first CSS3 test</p>

运行结果显示：



特别说明：^表示以。。。开头

$表示以。。。。结尾

*表示包含。。。内容

6.在CSS中，选择器都是用来选择元素的。

7.* 的用法：（HTML代码略有变动）

/*input中含有name属性值为stna的*/
input[name*=stna]{
background-color: #bc4f70;
}

<input type="text" name="firstname" class="username" value="sybil"><br>
<input type="text" name="middlename"><br>
<input type="text" name="lastname" class="lastname" value="Lee"><br>
<input type="text" name="usercity">
<p class="username">My first CSS3 test</p>     <!--新增加了p标签，class="username"-->

运行结果：