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