CSS 属性选择器的示例分享

发布时间:2020-11-08编辑:脚本学堂
不知道大家是否用过css中的属性选择器,本文分享几个css 属性选择器的例子,有需要的朋友不妨参考下。

本节内容:
CSS 属性选择器的例子。

对带有指定属性的 HTML 元素设置样式,属性选择器可以根据元素的属性及属性值来选择元素。
 
例1、为带有 title 属性的所有元素设置样式:
 

复制代码 代码示例:
<style type="text/css"> 
[title] 

color:red; 

</style> 
<h2 title="Hello world">Hello world</h2> 

例2、为 title="W3School" 的所有元素设置样式:
 

复制代码 代码示例:
<style type="text/css"> 
[title='W3School'] 

border:5px solid blue; 

</style> 
<a title="W3School" href="http://w3school.com.cn">W3School</a>

例3、为表单设置样式
 

复制代码 代码示例:
input[type="text"] 

  width:150px; 
  display:block; 
  margin-bottom:10px; 
  background-color:yellow; 
  font-family: Verdana, Arial; 

input[type="button"] 

  width:120px; 
  margin-left:35px; 
  display:block; 
  font-family: Verdana, Arial; 

例4、将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色:
 

复制代码 代码示例:
a[href][title]  

  color:red; 

 

5、与简单属性选择器类似,可以把多个 属性-值选择器 链接在一起来选择匹配元素。
 

复制代码 代码示例:
a[href="http://www.w3school.com.cn/"][title="W3School"]  

  color: red; 
}  
 

参考知识:
 

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素( CSS2 完成之后发布的)。