css3技术

CSS3中的属性选择符_div+css教程

字号+ 作者:H5之家 来源:H5之家 2015-09-17 16:55 我要评论( )

CSS3中的属性选择符,学习CSS3中的属性选择符,CSS3中的属性选择符,查看CSS3中的属性选择符,CSS3选择符语法概览:选择符类型______________表达式________________

 CSS3选择符语法概览:

选择符类型______________表达式__________________描述
子串匹配的属性选择符_____E[att^="val"]___________匹配具有att属性、且值以val开头的E元素
子串匹配的属性选择符_____E[att$="val"]___________匹配具有att属性、且值以val结尾的E元素
子串匹配的属性选择符_____E[att*="val"]___________匹配具有att属性、且值中含有val的E元素
结构性伪类_____________E:root_________________匹配文档的根元素。在HTML中,根元素永远是HTML
结构性伪类______________E:nth-child(n)__________匹配父元素中的第n个子元素E
结构性伪类______________E:nth-last-child(n)_______匹配父元素中的倒数第n个结构子元素E
结构性伪类______________E:nth-of-type(n)________匹配同类型中的第n个同级兄弟元素E
结构性伪类______________E:nth-last-of-type(n)_____匹配同类型中的倒数第n个同级兄弟元素E
结构性伪类______________E:last-child_____________匹配父元素中最后一个E元素
结构性伪类______________E:first-of-type__________匹配同级兄弟元素中的第一个E元素
结构性伪类______________E:only-child____________匹配属于父元素中唯一子元素的E
结构性伪类______________E:only-of-type__________匹配属于同类型中唯一兄弟元素的E
结构性伪类______________E:empty______________匹配没有任何子元素(包括text节点)的元素E
目标伪类________________E:target______________匹配相关URL指向的E元素
UI元素状态伪类__________E:enabled______________匹配所有用户界面(form表单)中处于可用状态的E元素
UI元素状态伪类__________E:disabled______________匹配所有用户界面(form表单)中处于不可用状态的E元素
UI元素状态伪类__________E:checked_______________匹配所有用户界面(form表单)中处于选中状态的元素E
UI元素状态伪类__________E::selection____________匹配E元素中被用户选中或处于高亮状态的部分
否定伪类________________E:not(s)________________匹配所有不匹配简单选择符s的元素E
通用兄弟元素选择器______E ~ F___________________匹配E元素之后的F元素

如果对上面的描述还不是很清楚的,请不要担心。本文下面的部分将会对他们进行更加详细的讲解,并且提供例子来演示他们是怎么使用的。

子串匹配的属性选择符

这一组的选择符都新加的,他允许开发者对属性中的子字符串来进行匹配。

假设HTML文档中包含下面的代码结构:

代码: <div id="nav-primary"></div>
<div id="content-primary"></div>
<div id="content-secondary"></div>
<div id="tertiary-content"></div>
<div id="nav-secondary"></div>

通过使用子串匹配的属性选择符就可以找到文档中这些结构性的特定组合。

下面的规则将为id以“nav”开头的div元素设定背景颜色:

代码: div[id^="nav"] { background:#ff0; }

上例中选择符会匹配div#nav-primary和div#nav-secondary。

要找到id以primary结尾的div元素,可以使用下面的规则:

代码: div[id$="primary"] { background:#ff0; }

这时选择符将匹配div#nav-primary和div#content-primary。

下面的规则将会匹配到id中含有content子字符串的的div中:

代码: div[id*="content"] { background:#ff0; }

受影响的元素有:div#content-primary、div#content-secondary和div#tertiary-content。

子串匹配的属性选择符已经在最新版本的Mozilla、Firefox、Flock、Camino、Safari、OmniWeb以及Opera中可以使用,但是如果IE中还不支持的话,我们最好还是先不要使用他们(作者在写这篇文章时IE还在开发中,如今IE7、IE8都支持这些选择符,dudo注)。

目标伪类

含有识别标识的url(一个#后面紧跟锚点名称或者元素的id)指向的是文档中的特定元素。链向其他目标元素的这些元素就可以使用:target伪类来修饰它。如果当前的URL中没有任何的片断识别标识,:target伪类将不会匹配任何元素。

还是以上面提到的代码结构为例,如果URL中包含content-primary标识时,现在的规则将会在他外围增加一个边框:

代码: div#content-primary:target { outline:1px solid #300; }

URL是类似这样的形式的:
#content-primary。
基于Mozilla和Safari的浏览器已经支持:target伪类。

UI元素状态伪类

:ENABLED伪类和:DISABLED伪类
在浏览器允许改变表单控件外观的前提下,:enabled伪类和:disable伪类允许开发者指定用户界面中可用和不可用元素(表单元素)的显示样式。下面的规则将会根据单行输入框是否可用设定不同的背景颜色:

代码: input[type="text"]:enabled { background:#ffc; }
input[type="text"]:disabled { backgound:#ddd; }

:CHECKED伪类
:checked伪类允许开发者为处于选中状态的checkbox和radio设定样式。当然这也要在浏览器允许改变表单控件外观的条件下。下面的CSS规则将会使选中的radio和checkbox元素显示一个绿色边框:

代码: input:checked { border:1px solid #090; }

UI元素状态伪类目前可以在Opera和基于Mozilla的浏览器中使用。

要注意的是,许多浏览器对于开发者对表单控件样式的改变有着严格的限制。更多关于这方便的内容可以我的两篇文章:《样式化表单控件》和《样式化更多表单控件》。

结构性伪类

结构性伪类允许开发者根据文档树中表明的结构来指定元素,而这些使用简单选择符或者是混合选择符都无法做到。结构性伪类功能十分强大,但是不幸的是现代浏览器仅提供了有限的支持。

:ROOT伪类
:root伪类指向的是文档的根元素。在HTML中,文档的根元素始终是HTML,也就是说现在的两条规则其实是一样的(大体上说来:root要比html更专业点)。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 阻碍你学习CSS的因素思维的转变HTML结构化_div+css布局教程

    阻碍你学习CSS的因素思维的转变HTML结构化_div+css布局教程

    2015-09-27 13:19

  • CSS背景_div+css教程

    CSS背景_div+css教程

    2015-09-20 11:28

  • CSS布局规则_div+css教程

    CSS布局规则_div+css教程

    2015-09-20 11:28

  • CSS隐藏文字的方法_div+css教程

    CSS隐藏文字的方法_div+css教程

    2015-09-20 11:26

网友点评