<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          css偽選擇器使用總結——css中關于偽類和偽元素的知識總匯

          時間:?2017-10-27閱讀:?1151標簽:?偽類

          CSS 偽類用于向某些選擇器添加特殊的效果,而CSS引入偽類和偽元素的概念是為了實現基于文檔樹之外的信息的格式化。這里講總結關于css偽類和偽元素的相關使用

          偽元素 

          :before/:before   在某個元素之前插入一些內容;

          ::after/:after    在某個元素之后插入一些內容;

          ::first-letter/:first-letter  為某個元素中的文字的首字母或第一個字使用樣式;

          ::first-line/:first-line    為某個元素的第一行文字使用樣式;

          ::selection     匹配用戶被用戶選中或者處于高亮狀態的部分;

          ::placeholder     匹配占位符的文本,只有元素設置了placeholder屬性時,該偽元素才能生效;

          ::backdrop(處于試驗階段)  用于改變全屏模式下的背景顏色,全屏模式的默認顏色為黑色。該偽元素只支持雙冒號的形式;

          偽類

          (1)表示狀態:

          :link   選擇未訪問的鏈接;

          :visited  選擇已訪問的鏈接;

          :hover  選擇鼠標指針移入鏈接;

          :active  被激活的鏈接,即按下單擊鼠標左鍵但未松開;

          :focus  選擇獲取焦點的輸入字段;

          (2)結構化偽類:

          :not      否定偽類,用于匹配不符合參數選擇器的元素;

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

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

          first-of-type  匹配屬于其父元素的首個特定類型的子元素的每個元素;

          :last-of-type  匹配元素的最后一個子元素;

          :nth-child    :nth-child根據元素的位置匹配一個或者多個元素,它接受一個an+b形式的參數(an+b最大數為匹配元素的個數);

          :nth-last-child  :nth-last-child與:nth-child相似,不同之處在于它是從最后一個子元素開始計數的;

          :nth-of-type    :nth-of-type與nth-child相似,不同之處在于它是只匹配特定類型的元素;

          :nth-last-type    :nth-last-of-type與nth-of-type相似,不同之處在于它是從最后一個子元素開始計數的;

          :only-child      當元素是其父元素中唯一一個子元素時,:only-child匹配該元素;

          :only-of-type  當元素是其父元素中唯一一個特定類型的子元素時,:only-child匹配該元素;

          :target       當URL帶有錨名稱,指向文檔內某個具體的元素時,:target匹配該元素;

          (3)表單相關偽類:

          :checked  匹配被選中的input元素,這個input元素包括radio和checkbox;

          :default    匹配默認選中的元素,例如:提交按鈕總是表單的默認按鈕;

          :disabled   匹配禁用的表單元素;

          :empty     匹配沒有子元素的元素。如果元素中含有文本節點、HTML元素或者一個空格,則:empty不能匹配這個元素;

          :enabled  匹配沒有設置disabled屬性的表單元素;

          :in-range    匹配在指定區域內元素;

          :out-of-range    與:in-range相反,它匹配不在指定區域內的元素;

          :indeterminate  indeterminate的英文意思是“不確定的”。當某組中的單選框或復選框還沒有選取狀態時,:indeterminate匹配該組中所有的單選框或復選框;

          :valid     匹配條件驗證正確的表單元素;

          :invalid    與:valid相反,匹配條件驗證錯誤的表單元素;

          :optional  匹配是具有optional屬性的表單元素。當表單元素沒有設置為required時,即為optional屬性;

          :required  匹配設置了required屬性的表單元素;

          :read-write  匹配處于編輯狀態的元素。input,textarea和設置了contenteditable的HTML元素獲取焦點時即處于編輯狀態;

          :scope(處于試驗階段)  匹配處于style作用域下的元素。當style沒有設置scope屬性時,style內的樣式會對整個html起作用;

          (4)語言相關偽類:

          :dir(處于實驗階段)  匹配指定閱讀方向的元素,當HTML元素中設置了dir屬性時該偽類才能生效。現時支持的閱讀方向有兩種:ltr(從左往右)和rtl(從右往左)。目前,只有火狐瀏覽器支持:dir偽類,并在火狐瀏覽器中使用時需要添加前綴( -moz-dir() );

          :lang    匹配設置了特定語言的元素,設置特定語言可以通過為了HTML元素設置lang=””屬性,設置meta元素的charset=””屬性,或者是在http頭部上設置語言屬性;

          (5)其他偽類:

           :root  匹配文檔的根元素。一般的html文件的根元素是html元素,而SVG或XML文件的根元素則可能是其他元素;

          :fullscreen  匹配處于全屏模式下的元素。全屏模式不是通過按F11來打開的全屏模式,而是通過Javascript的Fullscreen API來打開的,不同的瀏覽器有不同的Fullscreen  API。目前,:fullscreen需要添加前綴才能使用;

          備注:

          偽元素雖然強大,但是還是有一些特定的標簽是不支持偽元素 before 和 after 的。諸如 <img> 、<input>、<iframe>,這幾個標簽是不支持類似 img::before 這樣使用。究其原因,要想要標簽支持偽元素,需要這個元素是要可以插入內容的,也就是說這個元素要是一個容器,而 input,img,iframe 等元素都不能包含其他元素,所以不能通過偽元素插入內容  


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/20

          css的偽類有哪些?

          同一個標簽,根據其不同的種狀態,有不同的樣式。這就叫做“偽類”。偽類用冒號來表示。CSS 偽類用于向某些選擇器添加特殊的效果。

          css中:visited怎么不起作用?

          css定義超鏈接四個狀態也是有順序的,對于這4個偽類的設置,有一點需要特別注意,那就是它們的先后順序,要讓它們遵守一個順序原則,也就是link ~ visited ~ hover ~ active 。

          css偽類和偽元素

          偽類和偽元素,對于絕大多數同學來說,都是耳熟能詳的名字,但確實又有很多人搞不清楚它們之間的區別,以致于混淆概念。而當概念都混淆的時候,也往往意味著你不會經常使用它,怕出錯,怕用不好

          理解:before偽類搭配vertical-align:middle實現垂直居中的原理

          總所周知,Css如何實現元素垂直居中?已經是一個老生常談的問題了,這個問題目前已經有了許多解決方案,這些方案也都有各自適用的場景以及優缺點,大致如下:

          css中:focus偽類的使用

          當元素獲取到焦點之后,若該元素是一個有效的鏈接,則通過“Enter”鍵即可進入該鏈接地址;在頁面中也可以通過\\\"Tab\\\"鍵,遍歷所有的可獲得焦點的元素,使其獲得焦點;

          html中a標簽的4個偽類樣式

          在CSS超鏈接的屬性中,有四個連接方式:a:link a:hover a:visited a:acticve,之前在使用的時候一直是按照自認為的順序中去寫的,就是 L H V A的排序方式,然而有些時候卻發現并不起作用了

          中間文字,兩邊橫線的css3偽類的使用

          CSS偽類是用來添加一些選擇器的特殊效果。使用了css3的偽類,即相當于是在一個div中寫入文字,然后在它前后各加了一個div,然后進行位置及寬高的調節。代碼中只寫一個div,然后在css樣式中,對該div設置flex布局

          善用CSS偽類,不用JS也能做出選項卡功能

          本篇文章的技術給予選項卡UI另一種開發的選擇,Radio button的特性還有很多應用可以做(如Switcher),只要善用HTML表單元素與CSS的一些技巧,也能玩出很多有趣的功能,甚至替代JavaScript的部份工作.

          css否定偽類:not(s)

          :not(X)是CSS中的一個否定偽類(選擇器),并且接受一個簡單的選擇器作為參數。本質上,可以使任一其他選擇器(作為參數)。:not(選擇器)匹配傳遞參數選擇器未選擇的元素。傳遞參數或許不包括增加的選擇器或者偽元素選擇器。

          深入理解CSS偽類

          偽類經常與偽元素混淆,偽元素的效果類似于通過添加一個實際的元素才能達到,而偽類的效果類似于通過添加一個實際的類來達到。實際上css3為了區分兩者,已經明確規定了偽類用一個冒號來表示,而偽元素則用兩個冒號來表示。本文將詳細介紹偽類的詳細知識

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网