CSS3新增选择器——属性选择器

属性选择器

顾名思义，就是根据元素的属性及其属性值来确定目标元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

1.根据属性名确定元素：不使用类选择器或ID选择器，省去命名烦恼。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

语法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

元素标签[属性]

代码练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

<input type="text" value="请输入用户名">
<input type="text">

选择带有“value”属性的input元素，更改该元素字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

input[value] {
  color: red;
}

2.根据属性值确定元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

语法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

元素标签[属性='属性值']

代码练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

<input type="text" value="请输入用户名">
<input type="text">
<input type="password" value="123">

选择“value”属性值为password的input元素，更改该元素字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

input[type='password'] {
  color: blue;
}

3.根据属性值中某些字符确定元素文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

• 根据属性值开头字符确定元素

语法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

元素标签[属性^='字符']

代码练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

<header class="icon1">小图标1</header>
<header class="icon2">小图标2</header>
<header class="icon3">小图标3</header>
<header class='header1'>小图标4</header>

选择属性值带有icon的元素，更改元素字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

header[class^='icon'] {
  color: purple;
}

• 根据属性值结尾字符确定元素

语法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

元素标签[属性$='字符']

代码练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

<section class="icon1-data">icon1-data</section>
<section class="icon2-data">icon1-data</section>
<section class="icon3-do">icon1-data</section>

根据属性值结尾data字符确定元素并更改其字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

section[class$='data'] {
  color: pink;
}

• 根据属性值中包含字符确定元素

语法：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

元素标签[属性*='foot']

代码练习：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

<footer class="fo">fo</footer>
<footer class="foo">foo</footer>
<footer class="foot">foot</footer>
<footer class="footer">footer</footer>

根据属性值中包含有foot的字符的确定元素并更改其字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/47188.html

footer[class*='foot'] {
  color: aqua;
}