Heim  >  Artikel  >  Web-Frontend  >  CSS各属性选择符区别_html/css_WEB-ITnose

CSS各属性选择符区别_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:431153Durchsuche

ele[attribute] 匹配具有属性attribute的ele元素。

ele[attribute = value] 匹配具有属性attribute且值为value的元素。

ele[attribute ~= value] 匹配具有属性attribute且其中一个值为value的元素。(多个值用空格隔开)

ele[attribute |= value] 匹配具有属性attribute且其中一个值为value的元素或者以value开头紧接着是“-”连字符的ele元素。

ele[attribute ^= val] 匹配具有属性attribute且值以val开头的元素。

ele[attribute $= val] 匹配具有属性attribute且值以val结束的元素。

ele[attribute *= val] 匹配具有属性attribute且值以包含val的元素。

见代码:

<style>[lang~=china]{background:yellow;}[lang|=english]{background:red;}[lang^=au]{background:green;}[lang$=en]{background:gray;}[lang*=lo]{background:blue;}</style><p lang="china">Hello!</p><p lang="english-1">Hi!</p><p lang="aus">Ello!</p><p lang="us-en">Hi!</p><p lang="color">nihao!</p><p><b>注释:</b>对于 IE8 及更早版本的浏览器中的 [attribute|=value],必须声明 。</p>
效果图:



Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn