資訊專欄INFORMATION COLUMN
摘要：在及以下，偽類選擇器與兄弟選擇符一起使用會有一個(gè)，查看詳情。一般用于輸入框設(shè)置元素被選擇時(shí)的字體顏色和背景顏色注意事項(xiàng)在使用時(shí)需要加上各個(gè)瀏覽器的前綴除了是，其他瀏覽器都是使用?？偨Y(jié)選擇器用得好其實(shí)可以讓我們少些很多代碼。
很多人都覺得CSS特別簡單，但其實(shí)真正寫好CSS并不容易，CSS的每一點(diǎn)其實(shí)內(nèi)容都很多，就拿選擇器來說，CSS選擇器大概可以分為五類：
元素選擇器
關(guān)系選擇器
屬性選擇器
偽類選擇器
偽對象選擇器
元素選擇器| 選擇器 | 名稱 | 描述 |
|---|---|---|
| * | 通配選擇器 | 選擇所有的元素 |
| E | 元素選擇器 | 選擇指定的元素 |
| #idName | id選擇器 | 選擇id屬性等于idName的元素 |
| .className | class選擇器 | 選擇class屬性包含className的元素 |
元素選擇器只要是寫CSS都會經(jīng)常用，這一塊的內(nèi)容非常簡單，沒什么特別要說的。
關(guān)系選擇器| 選擇器 | 名稱 | 描述 |
|---|---|---|
| E F | 包含選擇器 | 選擇所有包含在E元素里面的F元素 |
| E>F | 子選擇器 | 選擇所有作為E元素的子元素F |
| E+F | 相鄰選擇器 | 選擇緊貼在E元素之后的F元素 |
| E~F | 兄弟選擇器 | 選擇E元素所有兄弟元素F |
這里要注意幾點(diǎn)：
子選擇器只能選中字元素，而不能選中孫輩；而包含選擇符將會選中所有符合條件的后代，包括兒子，孫子，孫子的孫子...
相鄰選擇符只會選中符合條件的相鄰的兄弟元素；而兄弟選擇符會選中所有符合條件的兄弟元素，不強(qiáng)制是緊鄰的元素。
在Android Browser4.2.*及以下，偽類選擇器:checked與兄弟選擇符一起使用會有一個(gè)bug，查看詳情。
屬性選擇器| 選擇器 | 描述 |
|---|---|
| E[att] | 選擇具有att屬性的E元素 |
| E[att="val"] | 選擇具有att屬性且屬性值等于val的E元素 |
| E[att~="val"] | 選擇具有att屬性且屬性值其中一個(gè)等于val的E元素（包含只有一個(gè)值且該值等于val的情況） |
| E[att|="val"] | 選擇具有att屬性且屬性值為以val開頭并用連接符-分隔的字符串的E元素，如果屬性值僅為val，也將被選擇 |
| E[att^="val"] | 選擇具有att屬性且屬性值為以val開頭的字符串的E元素 |
| E[att$="val"] | 選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素 |
| E[att*="val"] | 選擇具有att屬性且屬性值為包含val的字符串的E元素 |
| 選擇器 | 描述 |
|---|---|
| E:link | 設(shè)置超鏈接a在未被訪問前的樣式 |
| E:visited | 設(shè)置超鏈接a在其鏈接地址已被訪問過時(shí)的樣式 |
| E:hover | 設(shè)置元素鼠標(biāo)在其懸停時(shí)的樣式 |
| E:active | 設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式 |
| E:focus | 設(shè)置元素在成為輸入焦點(diǎn)（該元素的onfocus事件發(fā)生）時(shí)的樣式。(一般應(yīng)用于表單元素) |
| E:checked | 匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時(shí)) |
| E:enabled | 匹配用戶界面上處于可用狀態(tài)的元素E。(一般應(yīng)用于表單元素) |
| E:disabled | 匹配用戶界面上處于禁用狀態(tài)的元素E。(一般應(yīng)用于表單元素) |
| E:empty | 匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E |
| E:root | 匹配E元素在文檔的根元素。在HTML中，根元素永遠(yuǎn)是HTML |
| E:not(s) | 匹配不含有s選擇符的元素E |
| E:first-child | 匹配父元素的第一個(gè)子元素E |
| E:last-child | 匹配父元素的最后一個(gè)子元素E |
| E:only-child | 匹配父元素僅有的一個(gè)子元素E |
| E:nth-child(n) | 匹配父元素的第n個(gè)子元素E |
| E:nth-last-child(n) | 匹配父元素的倒數(shù)第n個(gè)子元素E |
| E:first-of-type | 匹配同類型中的第一個(gè)同級兄弟元素E |
| E:last-of-type | 匹配同類型中的最后一個(gè)同級兄弟元素E |
| E:only-of-type | 匹配同類型中的唯一的一個(gè)同級兄弟元素E |
| E:nth-of-type(n) | 匹配同類型中的第n個(gè)同級兄弟元素E |
| E:nth-last-of-type(n) | 匹配同類型中的倒數(shù)第n個(gè)同級兄弟元素E |
注意事項(xiàng)：
超鏈接的4種狀態(tài)(訪問前，鼠標(biāo)懸停，當(dāng)前被點(diǎn)擊，已訪問)，需要有特定的書寫順序才能生效；a:hover 必須位于 a:link 和 a:visited 之后，a:active 必須位于 a:hover 之后。
E:first-child選擇符，E必須是它的兄弟元素中的第一個(gè)元素，換言之，E必須是父元素的第一個(gè)子元素。與之類似的偽類還有E:last-child，只不過情況正好相反，需要它是最后一個(gè)子元素。
關(guān)于:not()的用法假定有個(gè)列表，每個(gè)列表項(xiàng)都有一條底邊線，但是最后一項(xiàng)不需要底邊線。
li:not(:last-child) {
border-bottom: 1px solid #ffffd;
}
上述代碼的意思是：給該列表中除最后一項(xiàng)外的所有列表項(xiàng)加一條底邊線。是不是很方便。
關(guān)于:nth-child()的用法要使E:nth-child(n)生效，E元素必須是某個(gè)元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一樣。
nth-child(n)括號里的n可以是一個(gè)數(shù)字，一個(gè)關(guān)鍵字，或者一個(gè)公式。
:nth-child(length) /*參數(shù)是具體數(shù)字 length為整數(shù)*/ :nth-child(n) /*參數(shù)是n,n從0開始計(jì)算*/ :nth-child(n*length) /*n的倍數(shù)選擇，n從0開始算*/ :nth-child(n+length) /*選擇大于等于length后面的元素*/ :nth-child(-n+length) /*選擇小于等于length前面的元素*/ :nth-child(n*length+1) /*表示隔幾選一*/ :nth-child(2n) / :nth-child(even) /*表示偶數(shù)*/ :nth-child(2n+1) / :nth-child(odd) /*表示奇數(shù)*/關(guān)于:...-child和:...-of-type的差異
這兩個(gè)系列的屬性確實(shí)很相似，對于不熟悉的人可能很難區(qū)分。
E:first-of-type 總是能命中父元素的第1個(gè)為E的子元素，不論父元素第1個(gè)子元素是否為E；而E:first-child里的E元素必須是它的兄弟元素中的第一個(gè)元素，否則匹配失效。E:last-of-type 與E:last-child也是同理。
E:nth-of-type(n)總是能命中父元素的第n個(gè)為E的子元素，不論父元素第n個(gè)子元素是否為E；而E:nth-child(n)會選擇父元素的第n個(gè)子元素E，如果第n個(gè)子元素不是E，則是無效選擇符，但n會遞增。
關(guān)于:nth-child()與:nth-of-type()的區(qū)別可以看這篇文章
選擇不包含子元素的div元素：
div:empty
選擇包含子元素的div元素：
div:not(:empty)偽對象選擇器
| 選擇器 | 描述 |
|---|---|
| E:before/E::before | 在目標(biāo)元素E的前面插入的內(nèi)容。用來和content屬性一起使用 |
| E:after/E::after | 在目標(biāo)元素E的后面插入的內(nèi)容。用來和content屬性一起使用 |
| E:first-letter/E::first-letter | 設(shè)置元素內(nèi)的第一個(gè)字符的樣式 |
| E:first-line/E::first-line | 設(shè)置元素內(nèi)的第一行的樣式 |
| E::placeholder | 設(shè)置元素文字占位符的樣式。(一般用于input輸入框) |
| E::selection | 設(shè)置元素被選擇時(shí)的字體顏色和背景顏色 |
注意事項(xiàng)：
::placeholder在使用時(shí)需要加上各個(gè)瀏覽器的前綴；除了Firefox是 ::[prefix]placeholder，其他瀏覽器都是使用 ::[prefix]input-placeholder。
總結(jié)選擇器用得好其實(shí)可以讓我們少些很多代碼。其實(shí)還有一些東西沒有展開來講，比如:before和:after，后面專門寫一篇文章來說。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/115406.html
摘要：折疊后的計(jì)算參與折疊的都是正值在都是正數(shù)的情況下，取其中較大的值為最終值。參與折疊的中有正值，有負(fù)值有正有負(fù)，先取出負(fù)中絕對值中最大的，然后，和正值中最大的相加。單冒號用于偽類，雙冒號用于偽元素。 轉(zhuǎn)自某個(gè)大神整理的面試題 盒子模型 標(biāo)準(zhǔn)盒子模型 內(nèi)容（content）+ 填充（padding）+ 邊界（margin）+ 邊框（border）; 低版本IE盒子模型 content部分把...
摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...
摘要：語法基礎(chǔ)語法規(guī)則由兩個(gè)主要部分構(gòu)成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高...
閱讀 1569·2021-10-14 09:43
閱讀 1561·2021-10-09 09:58
閱讀 2027·2021-09-28 09:42
閱讀 3832·2021-09-26 09:55
閱讀 1839·2021-08-27 16:23
閱讀 2842·2021-08-23 09:46
閱讀 974·2019-08-30 15:55
閱讀 1593·2019-08-30 15:54
