CSS3復雜選擇器


1.相鄰兄弟選擇器

       P+b : 同一個父元素下p標簽后面的第一個兄弟元素b;

 

 2.通用兄弟選擇器

       p~b : 同一個父元素下p標簽后面的所有兄弟元素b;

 

3.屬性選擇器

       將元素屬性用於選擇器中,從而獲取指定元素屬性或者值得元素;

       語法:

       [屬性] : 匹配 "指定屬性" 的 "所有" 元素;

       元素[屬性] : 匹配 "指定屬性" 的 "指定" 元素;

              input[type] : 獲取具備type屬性的input;

              input[id]   : 獲取具備id屬性的input;

       元素[屬性][屬性] :匹配 "多個指定屬性" 的 "指定" 元素;

       元素[屬性="值"] :匹配 "指定屬性等於值" 的 "指定" 元素;

       元素[屬性~="值"] : 匹配 "指定屬性中包含這個值(獨立的單詞)" 的 "指定" 元素;

       元素[屬性^="值"] : 匹配 "指定屬性以指定值開始" 的 "指定" 元素;

       元素[屬性*="值"] : 匹配 "指定屬性包含值(可以是非獨立的單詞)" 的 "指定" 元素;

       元素[屬性$="值"] : 匹配 "指定屬性以指定值結束" 的 "指定" 元素;

       元素[屬性!="值"] : 匹配 "指定屬性不等於值" 的 "指定" 元素;

                    

4.目標偽類

       活動的HTML錨點,用於選取當前活動的目標元素;

       語法:

       :target 匹配所有活動錨點

       元素:target 匹配指定元素活動錨點

 

5.元素狀態偽類

       主要匹配元素的禁用,啟用,選中狀態

       多數用在表單元素上;

       :disabled  匹配所有被禁用的元素

       :enabled  匹配所有被啟用的元素

       :checked  匹配所有被選中的元素  用於單選和復選;

 

6.結構偽類

       從元素結構(層級結構)上進行划分;

       用於:找 第一個子元素,最后一個子元素,沒有子元素,僅僅包含一個子元素

 

       :first-child      匹配父元素的第一個子元素

       :last-child       匹配父元素的最后一個子元素

       :empty           匹配沒有子元素的元素

       :only-child      匹配只有一個子元素的元素

       ul > li:nth-child(2n+1) {do something} //用來選取ul中的第2n+1(奇數)個li元素

       E:nth-of-type()只計算父元素中指定的某種類型的子元素,當某個元素的子元素類型不只是一種時,使用nth-of-type來選擇會比較有用。

   E:nth-last-of-type()的用法同E:nth-of-type()相同,不同的是:nth-last-of-type()也是從父元素的最后一個子元素開始算起。

   li:nth-of-type(3)的話就會標識它只會選擇第三個li元素,別的元素會忽略掉

 

7.否定偽類

       input:not([type="text"]){color:red;}

       input:not(:last-child){background:blue;}

 

8.偽元素選擇器

       :first-letter 選取指定選擇器的首字符;

              p:first-letter{

                     font-size:40px;

              }

              一幫用於排版,首字符突出等;

 

       :first-line 選取指定選擇器的首行字符;

 

       ::selection 匹配用戶的選取部分;

              如 選中的文本等

       ::selection{background:#ccc;color:red} //這樣改寫后我們選中的文本背景顏色和文字顏色就可以自定義了,但是需要注意的是,::selection僅接受兩個屬性,一個是background,一個是color。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM