1-1:CSS3课程入门之属性选择器

div[name=jewave] 选取属性名为name且属性值是"jewave"的元素
div[name^=jewave]选取属性名为name且属性值以"jewave"开头的元素
div[name$=jewave]选取属性名为name且属性值以"jewave"结尾的元素
div[name*=jewave]选取属性名为name且属性值中存在"jewave"的元素
div[name~=jewave]选取属性名为name且除第一个属性值外后面的属性值中出现了"jewave"的元素
div[name|=b]     选取属性名为name且属性值是单独的"b"或者属性值以"b-"开头的元素
时间： 2024-11-05 12:22:09

1-1:CSS3课程入门之属性选择器的相关文章

Selectivizr-让IE6~8支持CSS3伪类和属性选择器

一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性测试demo 二.简介 selectivizr是一个JavaScript工具,使IE浏览器也可以支持CSS3伪类以及属性选择器,使用很简单,只要把js include到页面上,然后你就可以(- o -)~zZ补觉了. 优点在于: 1. 让老的IE浏览器支持19个CSS3伪类,2个伪元素,以及所有的属

1-3:CSS3课程入门之伪类和伪元素

E:target 表示当前的URL片段的元素类型,这个元素必须是E E:disabled 表示不可点击的表单控件 E:enabled 表示可点击的表单控件 E:checked 表示已选中的checkbox或radio E::after 生成内容在E元素后 E:not(s) 表示E元素不被匹配 E~F表示E元素毗邻的F元素E:first-line选中第一行文字E:first-letter选中第一个字E::selection 当文字被选中时触发效果[注意是双冒号]Content 属性:E:after

1-2: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} E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算 E:nth-of-type(n) 表示E父元素中的第n个字节点,且类型为E E:nth-last-of-type(n)表示

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新增属性选择器： [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选择器-属性选择器

一.E[attr] E[attr]属性选择器是CSS3属性选择器中最简单的一种.如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器       IE6不支持这个选择器. 二.E[attr="value"] E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属

CSS3 01. CSS3现状、属性选择器、伪类选择器、

CSS 3 现状 兼容性差,需添加私有前缀/移动端优于PC端/不断改进中/渐进增强原则/考虑用户群体/遵照产品的方案 : CSS3手册 需要阅读其--阅读及使用指引 []表示全部的可选项 || 或者 | 表示 多选一 ? 表示 0个或1个 * 表示 0个或多个 {}表示范围  {A}代表出现A次 ,{A,B}代表出现A次以上B次以下 ,B可以省略,{A,} 代表至少出现A次,无上限 # 出现1次以上,以逗号隔开,可以选择后面跟大括号的方式精确表示重复次数:<length>#{1,4}. !代表

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=