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

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