快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

澳门黄金城官网网:CSS属性选择器的四种格式



属性选择器(Attribute Selectors),或许你不应该对属性选择器认为陌生,从本色上说,id跟类选择器着实便是属性选择器,只不过是选择了id或者类的值(value)而已。

属性选择器的款式是元素后跟中括号,中括号内带属性,或者属性表达式(不知道描述是否精确,自创的词),比如h1[title], h1[title="Logo"]等,你可以从我下面的叙述中看到4种详细形式。

1、简略单纯属性选择器

只顾其名掉落臂其值,这是简略单纯属性选择器的特征。

h1[class] {color: silver;}将会感化于任何带class的h1元素,不管class的值是什么。以是Hello、Serenity、Fooling的h1都邑受到这条规则的影响。

当然,这个“属性”不仅仅是class或者id,可所以该元素所有合法属性,比如img的alt,这样img[alt]{css d澳门黄金城官网网eclarations here;}将会感化于任何带有alt属性的img元素。那么a[href][title] {font-weight: bold;}呢?智慧的你必然已经知道,这会感化于同时带href和title属性的a元素,比如Webjx.Com。

2、正确属性值选择器

id和类本色上便是正确属性值选择器,没错澳门黄金城官网网,h1#logo即是h1[id="logo"]。如前所述,我们不要局限于id或者class,我们可以应用任何属性!例如a[href="http://www.fengfly.com/"][title="W3澳门黄金城官网网C Home"] {font-size: 200%;}将会感化于Webjx.Com。

3、部分属性值选择器

如其名,只要属性值部分匹配(这里的部分,实际上要匹配全部单词)就会感化于该元素。让我们来看个例子:

When handling plutonium, care must be taken to avoid the formation of a critical mass.

p[class~="warning"] {font-weight: bold;} 和p[class~="urgent"] {font-weight: bold;}中任何一条都可以让这个p的字体变粗。

该选择器十分有用,比如你要样式化插图,其title中都含字符串”Figure”,如 title= "Figure 5:xxx阐明",则你可以应用img[title~="Figure"] 。

必要留意的是,如我第一句就强调的,你必要匹配的是全部单词,img[title~="Figure"] 不会匹配title= "Figure5:xxx阐明"。

别的,我做了个小小的测试,你把例子中的“Figure”改成“插图”,把img[title~="Figure"] 改成img[title~="插图"] ,在Firefox中依然可以匹配,不管编码(encod澳门黄金城官网网ing)是GB2312照样UTF-8。看来CSS对中文的支持还不赖。

4、特殊属性选择器

有点怪,这个选择器。它是这样事情的,嗯,举个例子比描述更轻易。

*[lang|="en"] {color: whi澳门黄金城官网网te;},这条规则(rule)将会选择属性lang的值en或者en-打头的元素。便是说,它可以匹配Hello!、

Greetings!

G'day!

而不匹配

Bonjour!

和Jrooana!。

说完了,呵……CSS因你而强大年夜,好好练吧。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: