04 CSS CORE 複雜選擇器、內容生成、多列、CSS hack
======================================複雜選擇器========================================
1、複雜選擇器
2、內容生成
3、多列(打醬油的屬性)
4、CSS Hack(瀏覽器相容性)
*******************************
1、複雜選擇器：兄弟選擇器、屬性選擇器、偽類選擇器、偽元素選擇器
1、兄弟選擇器
1、作用
通過元素的平級關係來匹配其他元素（輩分相同的元素）
（最大的特點）只能向後不能向前
2、分類
1、相鄰兄弟選擇器
匹配指定元素的相鄰兄弟（緊緊挨在一起，不能相隔，位置的兄弟）
相鄰：緊緊挨在指定元素的後面
語法：
選擇器1+選擇器2
ex:
1、#d1+p{color：black;}：設定id選擇器為d1的相鄰的p元素的文字顏色為黑
2、#content+.important{}
2、通用兄弟選擇器
通用：某元素後面所有的兄弟元素
語法：
選擇器1~選擇器2
#d1~p{color：black;}:d1後面所有的p元素的文字顏色設定為黑
2、屬性選擇器
1、作用
允許使用元素所附帶的屬性及其值，來匹配頁面的元素
2、語法
唯一一組以 [] 來進行表示的選擇器
1、[attr]
attr:任意屬性名稱
作用：匹配 附帶 attr 屬性的元素
ex:
1、[id]：匹配頁面所有附帶 id 屬性的元素
2、elem[attr]
elem : 表示任意元素
作用：匹配附帶 attr 屬性的 elem 元素
ex:
1、p[id]：匹配附帶id屬性的p元素
3、elem[attr1][attr2]
作用：匹配頁面中所有即附帶attr1屬性也同時附帶attr2屬性的elem元素
ex:
div[id][class]：匹配同時帶有id屬性也同時附帶class屬性的div元素
4、elem[attr=value]
value:值
作用：匹配頁面上 附帶attr屬性同時值為 value 的elem 元素
ex:
input[type=text] : 獲取頁面所有文字框
5、elem[class~=value]
作用：匹配 附帶 class 屬性的 elem元素，其中class屬性的值是以空格隔開的值列表，value是值列表中的一個獨立值。
6、elem[attr^=value]
^= : 以 value 作為開始
作用：匹配附帶attr屬性的elem元素，並且該屬性值是以value作為開始的
7、elem[attr$=value]
$= : 以 value 作為結束
作用：匹配附帶attr屬性的elem元素，並且該屬性值是以value作為結束的
8、elem[attr*=value]
*= : 包含 value 字元即可
3、偽類選擇器
1、目標偽類
1、作用
突出顯示活動的HTML錨元素。匹配當前頁面中活動的HTML錨元素。
2、語法
:target
2、元素狀態偽類
1、作用
元素狀態 ：啟用，禁用，被選中(checked)
2、語法
:enabled , 匹配每個已啟用元素(表單控制元件)
:disabled , 匹配每個已禁用元素(表單控制元件)
:checked , 匹配每個被選中元素(radio,checkbox)
3、結構偽類(重點)
1、:first-child
匹配 屬於其父元素中的首個子元素
ex： td：first-child{color：child;}
2、:last-child
匹配 屬於其父元素中的最後一個子元素
3、:nth-child(n)(n=1時相當於first)
匹配 屬於其父元素中的第n個子元素
4、:empty
匹配 沒有子元素(也不能包含文字)的每個元素
<div></div>
5、:only-child
匹配屬於其父元素中的唯一子元素
<div>
<p>Hello World</p>
</div>
4、否定偽類（常用作排除、篩選）
1、語法
:not(選擇器)
作用：將 滿足選擇器的元素從指定範圍中排除出去
ex： #tb1 td:not(:first child){color:red;} ：匹配除每行第一列以外的所有列
4、偽元素選擇器
1、作用
偽類：匹配元素的
偽元素：匹配元素中的內容
2、語法
1、:first-letter 或 ::first-letter
匹配 指定元素的 首字元
2、:first-line 或 ::first-line
匹配 指定元素的 首行
3、::selection
匹配 被使用者選取的部分
3、: 和 ::的區別
CSS3之前，所有的偽元素選擇器，全部都是 使用 :，ex :first-line,:first-letter
CSS3中，將所有的偽元素選擇器全部都升級為 :: , ex ::first-letter, ::first-line
為了能夠實現瀏覽器的相容性，比較推薦使用 :的寫法
2、內容生成
1、什麼是內容生成
通過 css 向現有的 元素內容區域中增加一部分內容
2、偽元素選擇器
1、:before 或 ::before
匹配到某元素的內容區域之前
<div>(內容區域之前)Hello World</div>
2、:after 或 ::after
匹配到某元素的內容區域之後
<div>Hello World(內容區域之後)</div>
3、屬性
屬性:content
取值：
1、字串 : 純文字
2、url : 影象
3、計數器
4、計數器
1、作用
生成一段有序的數字，並且插入到元素中
2、三步走
1、宣告(復位)計數器
1、屬性
counter-reset
取值：
1、預設值為 0
2、可以取值為 正數或負數
counter-reset:計數器名稱 值;
一次性宣告多個計數器:
counter-reset:名1 值1 名2 值2;
2、什麼地方宣告計數器???
不能放在使用的元素中宣告
2、設定計數器的增量
1、屬性
counter-increment
作用：設定某個選擇器出現的計數器的增量，預設值為1
counter-increment:名稱 增量值;
2、什麼地方宣告計數器增量???
哪個元素使用，就在哪個元素中設定增量
3、使用計數器
1、函式
counter(計數器名稱)
配合著 :before 或 :after 一起使用
div:before{
content:counter(name);
}
4、練習
1、倚天屠龍記
1.1 張三丰
1.2 張翠山
1.3 張無忌
1.4 殷素素
2、西遊記
2.1 孫悟空
2.2 豬悟能
2.3 沙悟淨
2.4 白骨精
3、多列
1、分隔列
1、作用
將一段文字拆分成幾列
2、屬性
column-count
取值：數字
2、列間隔
1、作用
每兩列之間的間隔距離
2、屬性
column-gap
取值：px
3、列規則
1、作用
每兩列之間增加分割線，並設定分割線的寬度，樣式，顏色
2、屬性
column-rule : width style color;
4、瀏覽器相容性
IE10+,Opear 支援
Firefox : -moz-
Chrome,Safari: -webkit-
4、CSS Hack
1、解決問題
IE各版本瀏覽器相容性問題
2、CSS Hack
瀏覽器的型別及版本不同會造成CSS的解析效果也各不相同
不同廠商瀏覽器：IE，Chrome，Firefox，Safari
同一廠商瀏覽器的不同版本：IE6,IE7,IE8,IE9,IE10
3、CSSHack 原理
使用 CSS 樣式屬性的 優先順序 來解決相容性問題
4、CSSHack 分類
1、CSS類內部Hack
通過 屬性字首或值字尾 的方式來解決相容性
+ : 被IE6，IE7識別
- : 被IE6 識別
+，-如果同時出現的話，+只針對IE7，-只針對IE6
注意：
IE7的相容程式碼 要在上
IE6的相容程式碼 要在下
2、選擇器Hack
在選擇器前加上某些瀏覽器能識別的字首
div{
}
*字首：IE6識別
*+字首：IE7識別
*div{}
*+div{}
3、HTML頭部引用Hack
1、原理
通過IE條件註釋 解決相容性問題
IE瀏覽器會根據一個if條件判斷，判斷指定的內容是要被解析還是被註釋
2、語法
<!--[if 條件 IE 版本]>
內容
<![endif]-->
版本：6 ~ 10 數字
條件：
1、gt
大於指定版本的瀏覽器
2、gte
大於等於指定版本的瀏覽器
3、lt
小於指定版本的瀏覽器
4、lte
小於等於指定版本的瀏覽器
5、!
除條件版本以外的其他版本瀏覽器
ex:
<!--[if gt IE 6]>
該段內容只能在 IE6以上版本的瀏覽器中顯示
<![endif]-->
<!--[if IE 8]>
該段內容只能在IE8中顯示
<![endif]-->