Css3选择器-属性选择器

一、E[attr]

E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器

      IE6不支持这个选择器。

二、E[attr="value"]

E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属性值"value",这也是这两种选择器的最大区是之处。从而缩小了选择 围,更能精确选择自己需要的元素

       IE6浏览器不支持这种选择器。

三、E[attr~="value"]

如果你想根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],这种属性选择器是属性值是一个或多个词列表,如果是列表时,他们需要用空格隔开,只要属性值中有一个value相匹配就可以选中该元素,而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中,他们两者区别就是一个有“?”号,一个没有“?”号。

      IE6不支持E[attr~="value"]属性选择器。

四、E[attr^="value"]

E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,换句话说,选择的属性其以对应的属性值是以“value”开始的

      IE6不支持E[attr^="value"]选择器。

五、E[attr$="value"]

E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素,换句话说就是选择元素attr属性,并且他的属性值是以value结尾的,这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现

       IE6不支持E[attr$="value"]属性选择器。

六、E[attr*="value"]

E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说,只要你所选择的属性,其属性值中有这个"value"值都将被选中

      IE6不支持E[attr$="value"]属性选择器。

七、E[attr|="value"]

E[attr|="value"]是属性选择器中的最后一种,在说这个选择器使用之前先提醒大家attr后面的是一个竖线“|”而不是l,小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素

      IE6不支持E[attr|="value"]选择器。

时间: 2024-10-14 15:47:32

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

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

在CSS3中新增了 [attribute*=value] .[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念. 下边是一个使用这三个属性的完整示例代码,及运行后的页面展示效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title

【CSS3】---属性选择器

在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示:  实例展示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href=&qu

CSS3新增(选择器{属性选择器,结构伪类选择器,伪元素选择器})

1.属性选择器 属性选择器,可以根据元素特定的属性来选择元素,这样就不用借助 类 或者 id选择器. E [ att ]   选择具有 att 属性的 E 元素   例如:input [ value ] E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att = 'val' ]   选择具有 att 属性且属性值等于 val 的 E元素 E [ att ^= 'val' ]   选择具有 att 属性且属性值以 val 开头的 E元素 E

css3基本选择器+属性选择器+动态伪类+UI状态伪类+结构类

后代选择器 祖先元素 后代元素{ } 子元素选择器(直接子元素选择器) 父元素>子元素{ } 兄弟选择器 元素+兄弟元素(紧邻该元素之后的下一个兄弟元素) 所有兄弟元素选择器 元素~兄弟元素(该元素之后的所有兄弟元素) <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8">

CSS3 选择器之基本选择器 属性选择器 伪类选择器

CSS 选择器 常见的选择器列表图 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.className1.className2)不被ie6支持. id选择器(#ID) 后代选择器(E F) 子元素选择器(E>F)    IE6不支持子元素选择器.

jQuery easyUI id选择器 类选择器 标签选择器 属性选择器 及DOM对象和jQuery相互之间的转换

首先导入js文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"

选择器-属性选择器

属性选择器 1E[att$="val"]{ sRules } 选择具有att属性且属性值为以val结尾的字符串的E元素. 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 li[class$="a&quo

css3的新特性选择器-------属性选择器

自己学css的时候比较乱,这次趁着复习把css3的新特性选择器和css2以前不怎么用的选择器做一个总结 <div id="parent"> <p>I'm a example</p> <p id="one">I'm a example</p> <p>I'm a example</p> <p>I'm a example</p> <p>I'm a exa