html选择器等级,CSS属性选择器高级用法及选择器优先级问题_html/css_WEB-ITnose

最新推荐文章于 2022-08-20 20:29:54 发布

转载最新推荐文章于 2022-08-20 20:29:54 发布 · 203 阅读

标签

本文详细介绍了CSS中各种属性选择器的使用方法及其匹配规则，包括基本的选择器如[attr]、值匹配[attr='value']、前缀匹配[attr^='value']、包含匹配[attr*='value']、后缀匹配[attr$='value']、空格分隔匹配[attr~='value']以及连字符分隔匹配[attr|='value']等，并阐述了不同选择器的优先级。

CSS选择器之属性选择器 1：[attr] 存在此属性即可 2：[attr = 'attr_value'] 属性值为给定值即可 3：[attr ^= 'attr_value'] attr属性键以container开头即便是字符串匹配开头存在 container 匹配成功

开头存在 container 匹配成功

不在开头匹配失败 4：[attr *= 'attr_value'] attr属性键中存在给定的值即可即便是字符串匹配只要键值中有给定的值即可匹配成功 5：[attr $= 'attr_value'] attr属性键结尾匹配即便是字符串匹配结尾不存在失败

结尾存在成功

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

不存在失败

空格拆分存在container 匹配成功 7：[attr |= 'attr_value'] attr属性键值以 "-" 分隔且拆分得到的第一个值为给给定属性值匹配成功 -拆分第一个值为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 属性覆盖掉