CSS 属性セレクターの高度な使用法とセレクターの優先順位 issues_html/css_WEB-ITnose

CSS セレクターの属性セレクター

1: [attr] この属性はのみ存在します 2: [attr = 'attr_value'] 属性値は指定された値です 3: [attr ^= ' attr_value'] attr 属性キーは、文字列一致であってもコンテナで始まります

<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 会优先于一切选择器的定义*/}

ただし、上記は指定された重要な属性によって上書きされます