<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><style type="text/css"> div[data-type *= 'container'] { background-color : #00f; }</style><div data-type="nosensestrcontainernosensestr"> 只要键值中有给定的值即可匹配成功</div><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><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><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>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 属性覆盖掉
