未来往事

高级CSS样式选择器 不指定

Rinald 本站原创 WEB前端 2013/11/12 16:56
CSS选择器,CSS样式选择器,CSS选择器详解,高级CSS选择器,高级CSS选择器参考手册,CSS选择器参考指南

我们知道CSS 2 开始引入了属性选择器。属性选择器可以根据元素的属性及属性值来选择元素。简单的说即在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。本文主要描述CSS样式表中选择器的一些用法,当然你可能已经对CSS样式选择器不在生疏,但是通过本文你将能更好的掌握CSS样式的一些高级选择器使用。

CSS是对网页设计师可用的最强大的工具之一,你也许已经掌握了id、class、后台选择器这些基本的css选择器。但这远远不是css的全部。本文向大家介绍一些常见的高级CSS样式选择器,包括我们最头痛的浏览器兼容性问题。掌握了它们,才能真正领略css的巨大灵活性。

在深入研究高级CSS选择器之前,理解CSS优先级是如何工作很重要,这样我们就知道如何适当的使用我们的选择器并避免浪费大量的时间来调试一些只要我们注意到优先级的话就很容易被搞定的问题。当我们写CSS的时候我们必须注意有些选择器在级联(cascade)上会高于其它选择器,我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。选择器的优先级别规则:一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。通常我们用1表示标签名选择器的优先级,用10表示类选择器的优先级,用100标示ID选择器的优先级。在本文中也会在相关选择器中进行标注。

一、基本选择器(兼容浏览器:IE6+、Firefox、Chrome、Safari、Opera)
*  通用元素选择器,匹配任何元素,在页面上的每一个元素上起作用
h4  标签选择器,匹配所有使用h4标签的元素.优先级仅仅比*高
.textbox  class(类)选择器,匹配所有class属性中包含textbox的元素,class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素
#mainWrapper  id选择器,匹配所有id属性等于mainWrapper的元素。id是我们最常用的css选择器之一。id选择器的优势是精准,高优先级(优先级基数为100,远高于class的10),作为javascript脚本钩子的不二选择,同样缺点也很明显优先级过高,重用性差,所以在使用id选择器前,我们最好问下自己,真的到了非用id选择器的地步?
例如:


二、多元素的组合选择器/扩展选择器(兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera)
E,F  多元素选择器/群组选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔,如div,span,img{}(值得注意的是兼容IE6+)
E F  后代元素选择器--这也是我们最常用的一种选择器。要留意的点是,这种方式的选择器将选取其下所有匹配的子元素,无视层级,所以有的情况是不宜使用的。匹配所有属于E元素后代的F元素,E和F之间用空格分隔(值得注意的是兼容IE6+)
E > F  子元素选择器,匹配所有E元素的子元素F,与后代选择器E F不同的是,子选择器只对E下的直接子级F起作用
E + F  毗邻元素选择器,匹配所有紧随E元素之后的同级元素F(只匹配第一个元素)
例如:


三、属性选择器(兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera)
属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性,这样所有使用该属性——而不管它的值——的这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

CSS 2.1 属性选择器 (注意:由于博客程序问题,value值需要有双引号,下同)
E[att]  匹配所有具有att属性的E元素,不考虑它的值。(注意:E元素在此处可以省略,比如 [cheacked] 。以下同);
E[att=value]  匹配所有att属性等于 value 的E元素,即:该属性有指定的确切的值;
E[att~=value]  匹配所有att属性具有多个空格分隔的值、其中一个值等于 value 的E元素,即:该属性的值必须是一系列用空格隔开的多个值,(比如,class= title featured home ),而且这些值中的一个必须是指定的值 value ;
E[att|=value]   匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、属性的值就是 value 或者以 value 开始并立即跟上一个 - 字符,也就是 value- 。(比如lang= zh-cn );

CSS 3 属性选择器
E[att^= value ]  属性att的值以 value 开头的元素,即:该属性的值以指定值开始。
E[att$= value ]  属性att的值以 value 结尾的元素,即:该属性的值包含指定的值(而无论其位置)
E[att*= value ]  属性att的值包含 value 字符串的元素,即:该属性的值以指定的值结束。
例如:


四、 CSS 2.1中的伪类(兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera)
E:first-child   匹配父元素的第一个子元素。
E:link  匹配所有未被点击的链接标签。
E:visited  匹配所有已被点击的链接标签。
E:active  匹配鼠标已经其上按下、还没有释放的E元素
E:hover  匹配鼠标悬停其上的E元素,即:当鼠标划过时E元素的样式。需要注意的是,在IE6中:hover只能用于链接元素。
E:focus  匹配获得当前焦点的E元素--最常用于表单元素
E:lang(c)  匹配lang属性等于c的E元素
例如:


五、CSS 2.1中的伪元素/伪对象 [兼容性:IE6、IE7与IE8(怪异模式Quirks mode)不支持此伪元素,兼容浏览器IE9+、Firefox、Chrome、Safari、Opera]
E::first-line  匹配E元素的第一行
E::first-letter  匹配E元素的第一个字母
E::before  在E元素之前插入生成的内容
E::after  在E元素之后插入生成的内容
例如:


六、CSS 3的同级元素通用选择器(兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera)
E ~ F 相邻选择器,与前面提到的E+F不同的是,E~F匹配与E相同级别的所有F元素,而E+F只匹配第一个。
例如:


七、CSS 3中与用户界面有关的伪类(兼容浏览器:IE9+、Firefox、Chrome、Safari)
E:enabled   匹配表单中激活的元素(比如,文本输入框)和 checked 或unchecked 状态(radio单选按钮和checkbox复选框)
E:disabled  匹配表单中禁用的元素(同上)
E:checked  匹配处于选定状态的界面元素(同上)
E::selection   定义用户鼠标已选择内容的样式
例如:


八、CSS 3中的结构性伪类(兼容浏览器:IE9+、Firefox、Chrome、Safari)
E:root   匹配文档的根元素,对于HTML文档,就是HTML元素
E:nth-child(n)  匹配其父元素的第n个子元素,第一个编号为1
E:nth-last-child(n)   匹配其父元素的倒数第n个子元素,第一个编号为1
E:nth-of-type(n)   与:nth-child()作用类似,不同的是它匹配的不是某个序列元素,而是元素类型
E:nth-last-of-type(n)  与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素
E:last-child  匹配父元素的最后一个子元素,等同于:nth-last-child(1)
E:first-of-type  匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1)
E:last-of-type   匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1)
E:only-child  匹配父元素下仅有的一个子元素,等同于:first-child:last-child或 :nth-child(1):nth-last-child(1),这个伪类用的比较少
E:only-of-type  匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty  匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素
例如:


九、CSS 3的反选伪类/否定伪类选择器(兼容浏览器:IE9+、Firefox、Chrome、Safari)
E:not(value)   否定伪类选择器用来在匹配元素时排除某些元素,匹配不符合当前选择器的任何元素
例如:


十、CSS 3中的 :target 伪类(不支持IE全系列)
E:target  匹配文档中特定 id 点击后的效果
例如:


扩展阅读:
1、如何写出简洁、高效的CSS?
• 不要在ID选择器前使用标签名
  一般写法:DIV#divBox
  更好写法:#divBox
  解释: 因为ID选择器是唯一的,加上div反而增加不必要的匹配。
• 不要再class选择器前使用标签名
  一般写法:span.red
  更好写法:.red
  解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉
• 尽量少使用层级关系
  一般写法:#divBox p .red{color:red;}
  更好写法:.red{..}
• 使用class代替层级关系
  一般写法:#divBox ul li a{display:block;}
  更好写法:.block{display:block;}

2、样式表中定义CSS兼容IE6、IE7、FF


PS:另一点,我们在使用javascript类库的选择器时,例如jquery,要尽可能的使用这些原生的css3选择器,因为类库的选择器引擎会通过浏览器内置解析它们,这样会获得更快的速度。

CSS3选择器W3C参考手册:
http://www.w3school.com.cn/cssref/css_selectors.asp
作者:Rinald @『未来往事 | 记录生活,存储回忆!
原文地址:http://fity.cn/post/421/
本站采用「署名 4.0 国际(CC BY 4.0)」创作共享协议。通俗地讲,只要在使用时署名,那么使用者可以对本站所有原创内容进行转载、节选、混编、二次创作,允许商业性使用。除非在文章正文内单独说明,本站欢迎各种形式的转载。互联网技术更新很快,本站很多文章都具有实效性,我会及时更新原文,但转载的文章无法通知更新。为了不给读者造成困惑或误导,请大家在转载时保留此出处信息。
发表评论
  昵称 [注册]
  密码 (游客无需密码)
  网址
  电邮(电子邮件地址不会被公开, 仅用于接收评论回复提醒使用)
OpenID登入 权限选项 表情