网站建设CSS技术之属性选择器根据属性的给定值来定义属性样式

属性选择器允许您根据属性的存在或属性的给定值来定位项目。 /* Les éléments <a> avec un attribut title */ a[title] { color: purple; }</a> /* Les éléments <a> avec un href qui correspond */ /* à “https://example.org” */ a[href=”https://example.org”] { color: green; }</a> /* Les éléments <a> dont href contient “example” */ a[href*=”example”] { font-size: 2em; }</a> /* Les éléments <a> dont href finit par “.org” */ a[href$=”.org”] { font-style: italic; }</a> [attr] 允许您定位具有属性的项目 attr。 [attr=valeur] 允许您定位具有属性 attr且其属性值正好的元素 valeur。 [attr~=valeur] 允许您定位具有属性的元素,其属性 attr值是由白色分隔的单词列表,其中一个是完全正确的 valeur。 [attr|=valeur] 允许您定位具有属性的元素,该属性 attr的值为该属性 valeur的值,或者其值 valeur紧跟在连字符后面(U + 002D)。这可以特别用于与语言代码匹配。 [attr^=valeur] 允许您定位一个具有属性 attr且其第一个值以开头的元素 valeur。 [attr$=valeur] 允许您定位具有属性 attr且最后一个值以 valeur。结尾的元素。 [attr*=valeur] 允许您定位具有属性 attr且其值至少包含一个包含字符串的元素的元素 valeur。 [attr operateur valeur i] 可以在结束钩子之前添加一个  i(或 I)。在这种情况下,将不考虑该情况(对于包含在ASCII间隔中的字符)。 示例 /* Tous les spans qui ont un attribut “lang” seront en gras. */ span[lang] {font-weight:bold;} /* Tous les spans qui sont en portugais seront en vert */ span[lang=”pt”] {color:green;} /* Tous les spans en anglais américain sont bleus */ span[lang~=”en-us”] {color: blue;} /* Tous les spans en chinois seront en rouge, que ce soit du chinois simplifié (zh-CN) ou traditionnel (zh-TW) */ span[lang|=”zh”] {color: red;} /* Tous les liens internes auront un fond doré */ a[href^=”#”] {background-color: gold;} /* Tous les spans dont la première classe commence par “main” auront un fond jaune. */ /* Les spans avec la classe class=”banner main” ne seront pas affectés. */ span[class^=”main”] {background-color: yellow;} /* Tous les liens dont les URL terminent par “.cn” seront rouges */ a[href$=”.cn”] {color: red;} /* Tous les liens dont l’url contient “example” auront un fond gris */ a[href*=”example”] {background-color: #CCCCCC;} /* Tous les champs email auront une bordure bleue */ /* Toutes les capitalisations de email fonctionneront “email”, “EMAIL”, “eMaIL”, etc. */ input[type=”email” i] {border-color: blue;} <div class=”hello-example”><a href=”http://example.com”>English:</a> <span lang=”en-us en-gb en-au en-nz”>Hello World!</span></div> <div class=”hello-example”><a href=”#portuguese”>Portuguese:</a> <span lang=”pt”>Olá Mundo!</span></div> <div class=”hello-example”><a href=”http://example.cn”>Chinese (Simplified):</a> <span lang=”zh-CN”>世界您好!</span></div> <div class=”hello-example”><a href=”http://example.cn”>Chinese (Traditional):</a> <span lang=”zh-TW”>世界您好!</span></div>

友情提示:点赞熊源码网http://www.dianzanxiong.com点赞熊源码网 » 网站建设CSS技术之属性选择器根据属性的给定值来定义属性样式
分享到:
赞(0)
广告位820*80