日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

CSS3系列一（概述、选择器、使用选择器插入内容）

發(fā)布時間：2025/6/15 46 豆豆
生活随笔 收集整理的這篇文章主要介紹了 CSS3系列一（概述、选择器、使用选择器插入内容） 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

閱讀目錄

  • CSS3模塊化結(jié)構(gòu)
  • CSS歷史發(fā)展
  • CSS3屬性選擇器
  • 通用型偽類選擇器
  • CSS3結(jié)構(gòu)性偽類選擇器
  • CSS3 UI元素狀態(tài)偽類選擇器
  • CSS3 層級關(guān)系選擇器
  • 使用選擇器來插入內(nèi)容
回到頂部

CSS3模塊化結(jié)構(gòu)

回到頂部

CSS歷史發(fā)展

CSS（Cascading Style Sheet），層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。

回到頂部

CSS3屬性選擇器

  • E[attr=val]表示具有屬性att且其值等于val
  • E[attr*=val]表示具有屬性attr且其值中包含val
  • E[attr^=val]表示具有屬性attr且其值以val開頭
  • E[attr$=val]表示具有屬性attr且其值以val結(jié)尾

    • 事實上除了以上四個之外還有倆用的相對比較少的屬性選擇器，那就是

    E[attr|=val]用來選擇具有屬性attr且屬性的值為val或以val-開頭的元素(其中-是不可或缺的)。

    a[lang|=zh]{do something} //將會選擇具有l(wèi)ang屬性值為zh或?qū)傩灾狄詚h-開頭的a標簽

    E[attr~=val] 當某個元素的某個屬性具有多個用空格隔開的屬性值，此時使用E[attr~=val]只要attr屬性多個屬性值中有一個等于val匹配元素就會被選中。

    <a href="" id="test" title="test first"></a>a[title~=test]{do something} //將會選擇具有title屬性且其中一個屬性值為test的a標簽 回到頂部

    通用型偽類選擇器

  • E:first-line:為某個元素中的第一行文字使用樣式
  • E:first-letter用于為某個元素中的文字的首字母（歐美文字）或第一個字（中文或日文）使用樣式
  • E:before用于在某個元素之前插入一些內(nèi)容
  • E:after用于在某個元素之后插入一些內(nèi)容
    • 回到頂部

    CSS3結(jié)構(gòu)性偽類選擇器

  • :root選擇器將樣式綁定到頁面的根元素中，所謂根元素，是指位于文檔樹中最頂層結(jié)構(gòu)的元素，在html頁面中就是指包含著整個頁面的<html>部分
  • E:not想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素
  • E:empty指定當元素內(nèi)容為空白時使用的樣式
  • E:target對頁面中某個target元素指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用
  • E:first-child用來選取特定元素的第一個子元素
  • E:last-child用來選取特定元素的最后一個子元素。
  • E:nth-child用來選取某個父元素的一個或多個特定的子元素，其中的n可以是數(shù)值(從1開始)，也可以是包含n的表達式，也可以是odd(奇數(shù))，even(偶數(shù))。
  • E:nth-last-child 它的用法和nth-child用法一樣，但是nth-last-child()選擇的元素是從父元素的最后一個子元素開始算起。
  • E:nth-of-type只計算父元素中指定的某種類型的子元素（當某個元素的子元素類型不只是一種時，使用nth-of-type來選擇會比較有用）
  • E:nth-last-of-type 它的用法和nth-of-type一樣，不過不同的是:nth-last-of-type()也是從父元素的最后一個子元素開始算起。
  • E:only-child匹配元素的父元素只有一個子元素

    • ?

    回到頂部

    CSS3 UI元素狀態(tài)偽類選擇器

  • E:hover{do something} //選擇鼠標停留的匹配的E元素
  • E:active{do something} //選擇匹配的E元素，且元素被激活，常用在錨點和按鈕上
  • E:link{do something} //選擇定義了超鏈接但鏈接還未被訪問過的元素
  • E:visited{do something} //選擇定義了超鏈接并且鏈接已經(jīng)被訪問過的元素
  • E:focus{do something} //選擇匹配的E元素，且元素獲得焦點
  • E:enabled{do something} //選擇匹配的E元素，且元素處于可用狀態(tài)下
  • E:disabled{do something} //選擇匹配的E元素，且元素處于不可用狀態(tài)下
  • E:read-only{do something} //用來指定當元素處于只讀狀態(tài)時的樣式
  • E:read-write{do something} //用于指定當元素處于非只讀狀態(tài)時的樣式
  • E:checked{do something} //用來指定當表單中的radio單選框或checkbox復(fù)選框處于選取狀態(tài)時的樣式
  • E:default{do something} //用來指定當頁面打開時默認處于選取狀態(tài)的單選框或復(fù)選控件的樣式（即使用戶將該復(fù)選框或復(fù)選框控件的選取狀態(tài)設(shè)定為非選取狀態(tài) E:default選擇器中指定的樣式仍然有效）
  • E:indeterminate{do something} //用來指定當頁面打開時，如果一組單選框中任何一個單選框都沒有被設(shè)定為選取狀態(tài)時整組單選框的樣式（如果用戶選取了其中任何一個單選框，則該樣式被取消指定）
  • E::selection用來指定當元素處于選中狀態(tài)時的樣式

    • ?

    回到頂部

    CSS3 層級關(guān)系選擇器

    后代選擇器「E F」選擇匹配E的元素內(nèi)的所有匹配F的元素。

    子選擇器「E > F」?選擇配配E的元素的匹配F的直系子元素。

    相鄰兄弟元素選擇器「E + F」E和F是同輩元素，具有相同的父元素，并且F元素緊鄰在E元素的后面，此時可以使用相鄰兄弟選擇器。（也就是說只會選擇緊接著E元素的第一個F元素）

    通用兄弟選擇器「E ~ F」E和F是同輩元素，具有相同的父元素，并且F元素在E元素之后，E ~ F將選中E元素后面的所有F元素。

    回到頂部

    使用選擇器來插入內(nèi)容

    h1:before {content: 'MYTEXT';}h2::after {content: none;}h2::before {content: normal;/*雖然normal和none屬性值都表示不插入任何內(nèi)容但normal比none使用更廣泛，換句話的意思就是說none屬性值只能應(yīng)用到這兩個選擇器中，而normal屬性值還可以應(yīng)用到其它用來插入內(nèi)容的選擇器中*/}h3:before {content:url(logo.png);}h3 {background-image:url(logo.png);/*雖然兩種方法都可以插入圖像，但是使用background-image方法時，如果在打印的時候設(shè)定了不打印背景就不能正常打印圖像了但使用before選擇器追加的圖像文件卻可以正常打印*/}img::after {content:attr(alt);/*將alt屬性的值作為圖像的標題來顯示*/}

    上面的幾個用法可能都會，但下面的用法相信用的相對會比較少，但卻很實用哦！

    <style type="text/css">h1:before {content: counter(mycounter,upper-alpha)'.';/*后面的.可以為其指定樣式 比如說color:blue upper-alpha為大寫羅馬字母 這里面的值可以是list-style-type中的任意一種*/color: blue;font-size: 42px;}h1 {counter-increment: mycounter;}</style><h1>大標題</h1><p>示例文字</p><h1>大標題</h1><p>示例文字</p><h1>大標題</h1><p>示例文字</p>

    界面顯示如下圖所示：（也就是說使用counter屬性值來針對多個項目追加連續(xù)編號）

    再來看一個相對上面稍微復(fù)雜一點的，也就是編號多層嵌套的例子

    <style type="text/css">h1:before {content: counter(mycounter)'.';color: blue;}h1 {counter-increment: mycounter;counter-reset: subcounter;}h2:before {content: counter(mycounter) '-' counter(subcounter) '.';}h2 {counter-increment: subcounter;counter-reset: subsubcounter;margin-left: 40px;}h3:before {content: counter(mycounter) '-' counter(subcounter) '-' counter(subsubcounter) '.';}h3 {counter-increment: subsubcounter;margin-left: 80px;}</style><h1>大標題</h1><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h3>小標題</h3><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h2>中標題</h2><h3>小標題</h3><h3>小標題</h3><h1>大標題</h1><h2>中標題</h2><h3>小標題</h3>

    ?

    界面效果圖如下：（相信你看了代碼一看便明白了）

    還有一個使用content的小技巧，那就是在字符串兩邊添加嵌套文字符號

    h1:before {content:open-quote;}h1:after {content:close-quote;}h1 {quotes:"(" ")";/*當如果要使用雙引號的時候 需要用\轉(zhuǎn)義字符*/quotes:"\"" "\"";}

    總結(jié)

    以上是生活随笔為你收集整理的CSS3系列一（概述、选择器、使用选择器插入内容）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。