CSS-属性选择器的用法详解

属性选择器可以为拥有指定属性的 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;
}

CSS-属性选择器的用法详解相关推荐

html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
css3中的属性选择器有哪些,CSS3中属性选择器使用方法详解
css中属性选择器我感觉与css2有比较大的区别了,下面我整理了一些关于css3选择器的使用例子,希望对各位会带来帮助. 注释: 一.属性选择器除了IE6不支持外,其他的浏览器都能支持. 二.E[at ...
html中的author属性,meta标签name=“auther”属性写法和用法详解
name="auther"是html元素meta标签中众多属性之一,在大多数的网站网页中并没有标注网页作者,使用并不多!它主要是用来标注网页作者或制作组等信息的! auther用法 ...
description在PHP中作用,html元素meta标签name=“description”属性作用及用法详解
在html元素meta标签中的属性name="description"的用法: content属性值是网页描述文字,尽量用简洁的文字描述该网页的主要内容,一般控制在60字以内. 下 ...
Css中display:inline-block用法详解
display:block就是将元素显示为块级元素 block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div&g ...
asp怎么循环增加字段和字段对应的值_MySQL数据类型和字段属性原理与用法详解
本文实例讲述了mysql数据类型和字段属性.分享给大家供大家参考,具体如下: 本文内容: 数据类型数值类型整数型浮点型定点型日期时间类型字符串类型补充: 显示宽度与zerofll 记录长 ...
mysql字段类型原理_mysql数据类型和字段属性原理与用法详解
本文实例讲述了mysql数据类型和字段属性.分享给大家供大家参考,具体如下: 本文内容: 数据类型数值类型整数型浮点型定点型日期时间类型字符串类型补充: 显示宽度与zerofll 记录长 ...
css文本行高是哪个属性_css属性行高line-height的用法详解
css属性行高line-height的用法详解发布时间:2014-08-02 23:21:52 作者:佚名我要评论本文介绍下css中的line-height属性的用法,通过实例学习css ...

CSS-属性选择器的用法详解

CSS-属性选择器的用法详解相关推荐

最新文章

热门文章