CSS-属性选择器的用法详解
属性选择器可以为拥有指定属性的 HTML 元素设置样式;属性选择器通过 [] 来定义,[] 内部为元素的属性el[attr=val] 选择 attr 为 val 的 el 元素/* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */div p[class="blue"] {background: blue;}<div><p cl...
·
属性选择器可以为拥有指定属性的 HTML 元素设置样式;属性选择器通过 []
来定义,[]
内部为元素的属性,属性选择器的权重要高于标签选择器
-
el[attr=val]
选择 attr 为 val 的 el 元素/* 选择 div 下的 p 标签的 class 属性值为 blue 的元素 */ div p[class="blue"] { background: blue; }
<div> <p class="blue">p 标签</p> <p class="blue red">p 标签</p> <p class="blue">p 标签</p> </div>
-
el[attr *= val]
只要el 元素的 attr 属性值里含有 val 就能被选择.box a[class *= "download"]{ color: red; }
<div class="box"> <a href="#" class="download">下载</a> <a href="#" class="musicdownload">下载</a> <a href="#" class="downloadmovie">下载</a> <a href="#" class="image-download">下载</a> <a href="#" class="flast download">下载</a> </div>
-
el[attr ~= val]
el元素中的 attr 属性的属性值 val 单独存在 或 存在的属性值与其他属性值之间用空格隔开就能被选择.box a[class ~= "download"] { color: yellow; }
-
el[attr |= val]
el 元素中 attr 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 val 在 “-” 前.box a[class |= "download"] { color: skyblue; font-size: 20px; }
<div class="box"> <a href="#" class="download">下载2</a> <a href="#" class="music download">下载2</a> <a href="#" class="image-download">下载2</a> <a href="#" class="download-image">下载2</a> <a href="#" class="downloadmovie">下载2</a> </div>
-
el[attr ^= val]
el 元素的 attr 属性值里含有 val 且 val 在最前面才能被选择.box a[class ^= "download"] { color: pink; }
-
el[attr $= val]
el 元素的 attr 属性值里含有 val 且 在最后面
.box a[class $= "download"]{
color: orange;
}
更多推荐
所有评论(0)