css3属性选择器有哪些，html5属性选择器讲解

html5前端中，CSS3新增选择器：可以更加便捷自由的选择目标元素。新增选择器种类：属性选择器、结构伪类选择器、伪元素选择器。CSS3 引入了多种新的属性选择器，使得开发者可以更精确地选择和应用样式。以下是一些常用的CSS3属性选择器：

属性选择器，顾名思义，就是根据元素的属性及其属性值来确定目标元素。

1.根据属性名确定元素：不使用类选择器或ID选择器，省去命名烦恼。

语法：

元素标签[属性]

代码练习：

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

选择带有“value”属性的input元素，更改该元素字体颜色。

input[value]{ 
  color: red;
 }

2.根据属性值确定元素

语法：

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

代码练习：

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

选择“value”属性值为password的input元素，更改该元素字体颜色。

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

3.根据属性值中某些字符确定元素

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

语法：

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

代码练习：

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

选择属性值带有icon的元素，更改元素字体颜色。

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

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

语法：

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

代码练习：

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

根据属性值结尾data字符确定元素并更改其字体颜色。

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

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

语法：

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

代码练习：

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

根据属性值中包含有foot的字符的确定元素并更改其字体颜色。

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

注：在权重方面，属性选择器也是10。在使用选择器时注意权重优先级。今天学习的是CSS3新增选择器中的属性选择器。