html选择器优先值,CSS属性选择器高级用法及选择器优先级问题

CSS选择器之属性选择器

1：[attr] 存在此属性即可

2：[attr = 'attr_value'] 属性值为给定值即可

3：[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配

div[data-type ^= 'container'] {

background-color : #000;

}

开头存在 container 匹配成功

开头存在 container 匹配成功

不在开头 匹配失败

4：[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配

div[data-type *= 'container'] {

background-color : #00f;

}

只要键值中有给定的值即可匹配成功

5：[attr $= 'attr_value'] attr属性键结尾匹配 即便是字符串匹配

div[data-type $= 'container'] {

background-color : #0ff;

}

结尾不存在 失败

结尾存在 成功

结尾存在 成功

6：[attr ~= 'attr_value'] attr属性键值以空格分隔 其中存在给定的值即可匹配成功

div[data-type ~= 'container'] {

background-color : #f00;

}

空格拆分 存在container 匹配成功

不存在 失败

空格拆分 存在container 匹配成功

7：[attr |= 'attr_value'] attr属性键值以"-" 分隔 且拆分得到的第一个值为给给定属性值 匹配成功

div[data-type |= 'container'] {

background-color : #f0f;

}

-拆分 第一个值为container 匹配成功

不存在 失败

-拆分 第一个值不是container 匹配失败

CSS选择器之优先级

ID选择器 100 类选择器 10元素选择器 1

大家都知道 内联  >  内部  > 外部 而且样式内外样式表会因定义或引入的先后顺序后者覆盖前者

但样式选择器的优先级并不会因定义的先后顺序而发生覆盖

#container .article p {

background-color:#000;

font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/

}

//并不能覆盖前者 优先级低于前者

.article p {

background-color:#fff;

font-size:14px;/* 无效 后面的 important 会优先于一切选择器的定义*/

}

//同上

p {

background-color:#ccc;

font-size:16px!important;/*important 会优先于一切选择器的定义*/

}

但以上都会被指定为 important 属性覆盖掉