CSS屬性選擇器高級用法及選擇器優先級問題

來自： http://my.oschina.net/sallency/blog/605733

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 屬性覆蓋掉