1、複雜選擇器
1、兄弟選擇器
兄弟:具備相同父元素的一組元素稱為兄弟元素
1、相鄰兄弟選擇器
1、什麼是相鄰兄弟選擇器
匹配指定元素的相鄰兄弟元素
2、語法：
結合符:+
選擇器1+選擇器2
2、通用兄弟選擇器
1、什麼是通用兄弟選擇器
匹配指定元素下面所有的兄弟選擇器的元素
2、語法
結合符:~
選擇器1~選擇器2
2、屬性選擇器
1、作用：
允許通過元素所附帶的屬性以及值，來匹配頁面上的元素
2、語法
1、[attr]
匹配頁面上元素所附帶attr屬性的元素
eg[title]
2、elem[attr]
作用：匹配具備attr屬性的elem 元素
3、elem[attr1][attr2]
匹配頁面上同時具備attr1屬性以及attr2屬性的elem元素
4、elem[attr=value]
匹配attr屬性的值為value的elem元素
5、elem[attr~=value]
匹配attr屬性值，value是值列表中的乙個
6、elem[attr^=value]
匹配attr屬性值是以value作為開始的elem元素
7、elem[attr$=value]
匹配attr屬性值是以value作為結尾的elem元素
8、elem[attr*=value]
匹配attr屬性值中包含value字元的elem元素
3、偽類選擇器
匹配元素不同的狀態
已學1、鏈結偽類 :link :visited
2、動態偽類 :hover :active :focus
新偽類1、目標偽類
作用：突出顯示活動的html錨元素
語法：:target
2、元素狀態偽類
元素狀態：啟用的，禁用的，被選中的
使用場合：在表單元素中使用
1、語法：
1、:enabled 匹配每個已啟用的元素
2、:disabled 匹配每個被禁用的元素
3、:checked 匹配每個被選中的元素
3、結構偽類
1、:first-child 作用：匹配屬於其父元素中的第乙個子元素
2、:last-child 作用：匹配屬於其父元素中的最後乙個子元素
3、:empty 作用:匹配沒有子元素的每個元素
4、:only-child 作用：匹配屬於其父元素中的唯一子元素
hello world
5、:nth-child(n) 作用：匹配屬於其父元素的第n個子元素
4、否定偽類
作用:在獲取到的元素中，進行進一步的篩查和排除
語法 :not(選擇器)
選擇器:not(選擇器)
4、偽元素選擇器
偽類:匹配元素不同的狀態
偽元素：匹配元素內容中的一部分
1、:first-letter或::first-letter
作用：匹配元素的第乙個字元
2、:first-line或::first-line
匹配元素的首行文字
3、::selection
匹配使用者選取的部分
:和::的區別
在css2.0中，偽元素選擇器和偽類選擇器統一使用:來表示
在css3開始，w3c規範，所有的偽類選擇器使用:表示，
所有的偽元素選擇器，使用::表示
為了實現相容性，盡可能的使用:來表示偽元素， ::selection使用兩個冒號
2、內容生成
1、什麼是內容生成
通過css生成一部分新的內容，插入到網頁元素中
2、偽元素選擇器
1、:before 或::before
作用：匹配指定元素的內容區域之前
2、:after 或::after
作用：匹配指定元素的內容區域之後
3、屬性:content
作用：生成的內容是什麼
取值：1、字串，使用"括起來的文字"
2、影象，url()
3、計數器
1、什麼是計數器
通過css生成一組有順序的數字，並且新增到元素的內容區域中
2、語法：
1、counter-reset屬性
作用：宣告/復位乙個計數器
語法：counter-reset:計數器名稱 初始值；
初始值預設為0；
可以為正數，負數
一次宣告多個計數器
counter-reset:計數器名稱1 初始值1 計數器名稱2 初始值2；
宣告計數器的位置
不能放在使用計數器的元素中
推薦：將計數器放在使用元素的父元素中，如果頁面中所有的元素有相同的計數器，可以宣告在body中
2、counter-increment
作用：設定某個選擇器每次使用計數器的增量，預設值為1
取值：正數，遞增
負數，遞減
語法counter-increment:計數器名稱 增量
位置：哪個元素使用計數器，就放在哪個元素中
3、counter()函式
注意：配合content屬性一起使用
語法:content:counter(計數器名稱)
4、多列
1、分隔列
作用：將文字分成幾列
屬性：column-count
取值：數字
2、列間隔
作用：每兩列之間的距離
屬性：column-gap
取值：px
3、列規則、
作用：設定每兩列之間的邊框的大小樣式顏色
屬性：column-rule
取值：width style color
4、相容性
ie10+，opera：支援多列屬性
firefox： -moz-字首
chrome safari -webkit
day01 pm
H5 學習筆記3
html標籤 表單 input標籤 屬性 type text文字框 password密碼框 radio單選框 checkbox多選框 button按鈕 reset重置 submit提交 select標籤 屬性 option 下來框 textarea標籤 文字域 button標籤 作用範圍比較廣 fo...
h5學習筆記 Table
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！編寫乙個 作為練習。當中有個比較重要的樣式在學習過程中遇到，border collapse collapse 能夠去除雙重的邊框。table可以合併單元格所以 對td屬性設定 colspan 2 則代表可以設定單元格。table 當中thead，t...
H5小內容（六）
web worker 基本內容 單執行緒與多執行緒 worker可以模擬多執行緒的效果 定義 執行在後台的j ascript 注意 不能使用dom 在worker中只能使用j ascript中的ecma 目前主流瀏覽器都支援worker,除ie8之前 worker提供api 檢測當前瀏覽器是否支援w...