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

WBOY
发布: 2016-06-21 08:59:17
原创
1158 人浏览过

CSS选择器之属性选择器

1:[attr] 存在此属性即可 2:[attr = 'attr_value'] 属性值为给定值即可 3:[attr ^= 'attr_value'] attr属性键以container开头 即便是字符串匹配
<style type="text/css">    div[data-type ^= 'container'] {        background-color : #000;    }</style><div data-type="container master">    开头存在 container 匹配成功</div><div data-type="containernosensestr">    开头存在 container 匹配成功</div><div data-type="master container">    不在开头 匹配失败</div>
登录后复制
4:[attr *= 'attr_value'] attr属性键中存在给定的值即可 即便是字符串匹配
<style type="text/css">    div[data-type *= 'container'] {        background-color : #00f;    }</style><div data-type="nosensestrcontainernosensestr">    只要键值中有给定的值即可匹配成功</div>
登录后复制
5:[attr $= 'attr_value'] attr属性键结尾匹配 即便是字符串匹配
<style type="text/css">    div[data-type $= 'container'] {        background-color : #0ff;    }</style><div data-type="container master">    结尾不存在 失败</div><div data-type="nosensestrcontainer">    结尾存在 成功</div><div data-type="master container">    结尾存在 成功</div>
登录后复制
6:[attr ~= 'attr_value'] attr属性键值以空格分隔 其中存在给定的值即可匹配成功
<style type="text/css">    div[data-type ~= 'container'] {        background-color : #f00;    }</style><div data-type="container master">    空格拆分 存在container 匹配成功</div><div data-type="containernosensestr">    不存在 失败</div><div data-type="master container">    空格拆分 存在container 匹配成功</div>
登录后复制
7:[attr |= 'attr_value'] attr属性键值以 "-" 分隔 且拆分得到的第一个值为给给定属性值 匹配成功
<style type="text/css">    div[data-type |= 'container'] {        background-color : #f0f;    }</style><div data-type="container-master">    -拆分 第一个值为container 匹配成功</div><div data-type="containernosensestr">    不存在 失败</div><div data-type="master-container">    -拆分 第一个值不是container 匹配失败</div>
登录后复制

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 属性覆盖掉


来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板