CSS3 选择器 属性选择器使用

首先这是一个非常非常好用的功能,比如我们有一个文章列表,我们想将含有某些词的文章特殊显示,就使用这种方法就可以。

CSS3的属性选择器主要包括以下几种:

Eement---元素
data---属性
value---属性里面的值

Eement[attr]:只使用属性名,但没有确定任何属性值;
Eement[attr="value"]:指定属性名,并指定了该属性的属性值;
Eement[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“”不能不写;
Eement[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
Eement[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
Eement[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
Eement[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn); 

看上面很晕吧,用我自己写的例子来说明,并且相关使用在例子中有注释。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box li[class] 
        {
        	/*仅将带有class属性的添加颜色*/
        	color:red;
        }
        
	      .box li[name="b"]
	      {
	      	/*常用写法:将name为b的添加颜色*/
	      	color:gray;
	      }
	      
	      .box li[class^="d"]
	      {
	      	/*将class为c打头的所有li增加颜色  注:如果一个class里使用了多个类,以第一个类打头的字母起作用*/
	      	color:blue;
	      }
	      
	      .box li[class$="s"]
	      {
	      	/*将class为s结尾的所有li增加颜色,注:如果一个class里使用了多个类,以最后一个类打头的字母起作用*/
	      	color:#008641;
	      }
	      
	      .box li[id*="c-"]
	      {
	      	/*将id中包含c-的添加颜色,c-可以处在任何位置*/
	      	color:#000;
	      }
	      .box li a[title~="两者"]
	      {
	      	/*a链接里 title属性中含有 "两者" 的加背景和字体颜色,注:必须是独立词,如果词是:"两者之间",则不起作用*/
	      	background: #000; 
	      	color:#fff;
	      }
    </style>
</head>
<body>
<div class="box">
    <ul>        
        <li class="a">html</li>
        <li name="b">css</li>
        <li class="c js">javascript</li>
        <li class="d j pn">php</li>
        <li class="e">bootstrap</li>
        <li class="f js">jquery</li>
        <li class="g js">js</li>
        <li class="h">asp</li>
        <li class="i">jsp</li>
        <li id="j c-n">C++</li>
        <li id="k c-n">C#</li>
        <li><a href="" title="用于 两者 之间通信">xml</a></li>
    </ul>
</div>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND