CSS3---属性选择器

在HTML中,通过各种各样的属性可以给元素增加很多附加的信息。例如,通过id属性可以将不同div元素进行区分。

在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器。如下表所示:

(单击可放大)

 实例展示:

html代码

<a href="xxx.pdf">我链接的是PDF文件</a>
<a href="#" class="icon">我类名是icon</a>
<a href="#" title="我的title是more">我的title是more</a>

css代码

a[class^=icon]{
  background: green;
  color:#fff;
}
a[href$=pdf]{
  background: orange;
  color: #fff;
}
a[title*=more]{
  background: blue;
  color: #fff;
}
时间: 2024-10-10 18:18:53

CSS3---属性选择器的相关文章

CSS3属性选择器详解

上一章在<CSS3基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器.属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式.使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值. 从上一节展示的CSS3选择器的图表中,我们可以知道,CSS3的属性选择器主要包括以下几种: E[attr]:只使用属性名,但没有确定任何属性值: E[attr="

CSS3属性选择器详解 及 双色球实战开发

在前面的章节中,我们了解了,可以使用行内样式,ID选择器,类选择器,以及标签选择器来给一个元素应用样式. 如果我们想给定义了那些都定义了某一个属性的元素应用样式,这个时候我们该怎么做呢? 这一节中,我将使用 双色球案例 和 文档类型提示图标案例 来引入和应用属性选择器. 双色球案例: 大家都知道,双色球共有7个球,6个红球,1个蓝球.首先我们先在页面上面定义7个span标签: <!DOCTYPE html> <html> <head> <meta charset=

CSS3属性选择器与(:not)选择器

一:css3属性选择器: img[alt]{ border:2px dashed #000; } 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代码: img[alt="atwi_oscar"]{ border:2px dashed #000; } css3的子字符串匹配属性选择器 (1)‘匹配开头’的属性选择器依法如下: Element[attribute^="value"],实例代码如下: img[alt^

css3属性选择器总结

前两节介绍了css3属性选择器与css2属性选择器中: 包含字符串和以字符串选择器开头的选择器的比较. 全部属性选择器: 包含字符串讲解对比实例讲解链接: http://www.cnblogs.com/thomascui/p/5252805.html 以字符串开头对比实例讲解链接:http://www.cnblogs.com/thomascui/p/5241229.html 现在将css3中剩余的属性选择器做个简单介绍: 1. [attribute]与[attribute=value]没什么特殊

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情.因此,痛下决心来学习CSS,最近一周也会更新下相关的学习笔记. CSS3中使用了很多的属性选择器,通过这些属性选择器,可以根据我们自己的设计来定义元素的样式,制作精美的网页. 下面是CSS3的属性选择器的语法,及使用. 元素名字[元素类型=“类型名字”]:选择器名字{ 属性:值: 属性:值: } 在元素类型匹配时,就可以使用类似正则的匹配方法. [att=val] 指

css3属性选择器,兄弟选择器,伪类选择器

属性选择器 css3语法(类似于正则) 属性选择器:属性是相对于标签而言. 所谓属性选择器就是根据指定名称的属性的值来查找元素 /*1.E[attr]:查找指定的拥有attr属性的E标签.如查找拥有style属性的li标签*/ li[style]{ text-decoration: underline; } /*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签.如想查找拥有class属性并且值为Red的li标签   =是严格匹配*/ li[class=re

css3属性选择器

语法: 1 元素[attr^="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val开头的任意字符串 */ 2 元素[attr$="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值以val结尾的任意字符串 */ 3 元素[attr*="val"];/* 选择匹配元素,并且元素定义了属性attr,其属性值任意位置包含了val */ html代码: 1 <a href="" cla

css3——属性选择器

lE[attr]只使用属性名,但没有确定任何属性值 lE[type="text"]指定属性名,并指定了该属性的属性值 lE[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“?”不能不写 lE[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的 lE[attr$="value"]指定了属性名,并且有属

css3——属性选择器(二)

E:nth-child(n)  表示E父元素中的第n个字节点 •p:nth-child(odd){background:red}/*匹配奇数行*/ •p:nth-child(even){background:red}/*匹配偶数行*/ •p:nth-child(2n){background:red} •p:nth-child(2n+1){background:blue} E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算 E:nth-of-type(n)  表示E

css3 属性选择器加伪类选择器一起使用

先看代码,以下代码是可以工作,这里记录下实现机制. <!DOCTYPE html> <html> <head> <style> p[class="a1"]:nth-of-type(5) { background:#ff0000; } </style> </head> <body> <h1>这是标题</h1> <p class="a1">第一个段落.