国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css選擇器總結

Bowman_han / 494人閱讀

摘要：今天在做項目的時候，發現選擇器有些遺忘。文本也屬于節點選擇匹配的所有元素，且匹配元素被相關指向否定偽類選擇器。相鄰兄弟選擇器。匹配的元素，該元素位于后面相鄰位置通用兄弟選擇器。

今天在做項目的時候，發現選擇器有些遺忘。特寫此文章來加深記憶，也方便自己日后回顧。

通用選擇器 * 
//有時候為了瀏覽器內置樣式，可能會這樣寫。
//但一般不推薦！！！
*{ margin:0;padding:0; }
標簽選擇器 E ID選擇器 #myid 類選擇器 .myclass 
類選擇器和ID選擇器算是最常見兩種選擇器。
這里要講一下關于選擇器優先級。
優先級從高到低分別為：
內聯樣式、ID、class/屬性選擇器/偽類選擇器[如:hover,:focus]等、元素選擇器/偽元素選擇器[如:before,:after]
如果兩個優先級相同，則按照聲明順序，寫在【樣式表】后面的起作用。
【注意！是在樣式表中的位置！而不是在使用的位置！】



    
 123 



最后p的顏色顯示為red！！！是寫在樣式表后面的.classB起作用！
屬性選擇器

E[disable] E中定義了disable屬性的元素。E可省略，則表示選擇定義了disable屬性的任意類型的元素

E[att="val"] 匹配所有att屬性等于val的E元素。E可省略，同上。

E[att~=key] 匹配att屬性有key的元素,att屬性是一個以空格符分隔的列表。



a[title~="bar1"]匹配第一個a元素

E[att|=es] 匹配E的元素，且att屬性值是以es開頭，att屬性是用‘-’分隔的列表。



[lang|en] 匹配第一個body元素

E[att*="bar"] 匹配E的元素，且att屬性值包含bar的子字符串。

E[att^="http://"] 匹配E的元素，且att屬性以http://開頭

E[att$=".png"] 匹配E的元素，且att屬性以.png結尾

偽類選擇器

E:link 被定義了超鏈接并未被訪問

E:visited 被定義了超鏈接并已經訪問

E:active 匹配元素被激活

E:hover 匹配元素正在被鼠標經過

【注意順序：LVHA :link->:visited->:active:->:hover】
舉個栗子。

a:link {color: blue;}
a:active {color: red;}
a:hover {color: magenta;}
a:visited {color: purple;}

由于優先級相同，按照先后順序來顯示。
一個未被訪問過的鏈接可以同時是hover和active的狀態，但是由于visited寫在最后，所以會覆蓋了:active和:hover的樣式。那么這個鏈接都是紫色的,無法呈現:active和:hover的狀態。

E:focus 匹配元素獲取了焦點

E:first-child 匹配E的元素，且該元素是父元素的第一個子元素

E:last-child 父元素中最后一個位置，且匹配E的子元素

E:nth-child(n) 選擇所有在其父元素中第n個位置的匹配E的子元素

E:nth-last-child(n) 選擇所有在其父元素中倒數第n個位置的匹配E的子元素

E:nth-of-type(n) 在所有滿足E的元素內的第n個元素

E:first-of-type 相當于E:nth-of-type(1)

E:last-of-type 相當于E:nth-last-of-type(1)

這里nth-child/nth-last-child和nth-of-type容易混淆。


    

    
123

    
456




p:nth-of-type(2){color:red;}
p:nth-child(2){color:blue;}

效果：
123為藍色。p:nth-child(2)匹配其父元素中第二個位置的p元素。若div元素第二個位置元素不是p元素，則不起作用。
456為紅色。p:nth-of-type(2)匹配div中所有p元素中的第二個。

E:empty 匹配E的元素，且不包含子節點。【文本也屬于節點】

E:target 選擇匹配E的所有元素，且匹配元素被相關URL指向

E:not(s) 否定偽類選擇器。匹配E且不滿足s選擇符的元素。

E:root 匹配文檔根元素

E::selection 匹配當前選中的元素

E:checked 匹配E的所有被選中UI元素radio/checkbox

E:enabled 匹配E的所有可用UI元素

E:disabled 匹配E的所有不可用UI元素

在網頁中，UI元素一般是指包含在form元素內的表單元素


    
    
    
    



input:checked 匹配單選按鈕，不匹配復選框
input:enabled 匹配文本框，復選框，單選按鈕，不匹配button
input:disable 匹配button

關系選擇器

A E 后代選擇器。匹配E，且是被包含在A內的元素。只要是A的后代即可。

A > E 子包含選擇器。匹配E的元素，且是A元素的子元素！只能是子元素，不能是孫元素等。。

B + E 相鄰兄弟選擇器。匹配E的元素，該元素位于B后面相鄰位置！

A ~ E 通用兄弟選擇器。匹配E的元素，該元素位于E元素的后面，且在同一級結構。即兄弟位置。

偽元素選擇器

E:first-line E元素內第一行文本

E:first-letter E元素內第一個字符

E:before 在E元素之前插入生成內容

E:after 在E元素之后插入生成的內容

之前利用選擇器和css3動畫寫了一個篩選菜單的效果。
github地址如下：https://github.com/Lsxj/css3/tree/master/css-filter
效果如下：

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115248.html

相關文章

  • css選擇器總結

    摘要：偽類選擇器之動態偽類序號選擇器名稱說明版本動態偽類選擇器未被訪問時動態偽類選擇器已被訪問時動態偽類選擇器鼠標以上時動態偽類選擇器訪問中跳轉頁面時動態偽類選擇器獲得焦點時是有順序的，其他順序可能無效，這是個坑。 1. 基本選擇器 序號 選擇器 名稱 說明 css版本 1 * 通用選擇器 選擇所有元素，包括html和body 2 2 div,span 標簽選擇器 根據標簽選擇...

    DirtyMind 評論0 收藏0

  • CSS選擇器總結（分類、優先級）

    摘要：樣式選擇器權重優先級如下的權重為選擇器的權重為類選擇器的權重為偽類選擇器的權重為屬性選擇器的權重為標簽選擇器的權重為偽元素選擇器的權重為通配符的權重為綜合上述權重優先級來看，正確的優先級排序應該是內聯樣式類偽類屬性選擇標簽偽元素繼承通配符 CSS選擇器是編寫CSS代碼時的一個核心概念，選擇器定義了相應的樣式將會影響到文檔中的哪些部分，以下是自己在學習及工作過程中對CSS選擇器的一些總結...

    hedge_hog 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（三）

    摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術》中CSS—DOM的總結（三）

    摘要：前言這是系列最后一篇，本文主要總結了的用法，以及最后對函數進行抽象。一個多說無益，還是上代碼來得實在還記得編程藝術中的總結一中那個無聊的根據元素在節點樹里的位置來設置樣式的吧現在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結了className的用法，以及最后對函數進行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • css規范總結

    摘要：通用選擇器，子選擇器和相鄰同胞選擇器并不在這四個等級中，所以他們的權值都為，優先級最高，萬不得已的情況下才用。規范命名風格規范文件命名統一為小寫的英文字母盡量少用拼音，如。當名字需要組合時，可以采用文件名的規范。 css樣式的權值(權重) 權值等級的定義 第一等：代表內聯樣式，如: style=，權值為1000。第二等：代表ID選擇器，如：#content，權值為100。第三等：代表類...

    CollinPeng 評論0 收藏0

發表評論

0條評論

Bowman_han

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<