首頁 > web前端 > css教學 > 主體

關於css選擇器知識詳解

迷茫
發布: 2017-03-25 14:01:41
原創
1488 人瀏覽過

匯入外部css樣式表的方法

  1. 使用link標籤匯入外部css樣式表
    <link rel="stylesheet" href="css/demo01 .css">

  2. 在樣式表中import(導入)外部樣式表
    @import url("/crazy-html5/06css/css /demo01.css");

使用內部樣式表

內部樣式表只能作用在某一個網頁,定義方式為在 head頭部加入style標籤,在style標籤中即可新增頁面樣式。

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>
登入後複製

選擇器知識點

元素屬性選擇器

  1. #普通標籤選擇器
    ##table:{background:red; }

  2. 含有某個屬性的標籤


    p[id]{background:red;}表示含有id屬性的p元素

  3. 含有某個屬性且屬性值為特定值的標籤


    p[id=aaa]{background:red;}表示含有id屬性,且id =aaa的p元素

  4. 含有某個屬性且屬性值以特定值開頭的元素


    p[id=^aaa]{background:red;}表示含有id屬性,id的值是以aaa開頭的p元素

  5. 包含某個屬性且屬性值以特定值結尾的元素


    p [id=$c]{background:red;}表示含有id屬性,且id的值是以c結尾的p元素

ID選擇器

id選擇器,指定id為特定值的元素,例如

#myp表示的是idmyp值的元素,id選擇器前面要新增符號

#Class選擇器

類別選擇器是符合class值的元素,選擇器前面必須加入符號

.,例如.myclass表示的是所有class值為myclass的元素。

類別選擇器可以結合元素選擇器使用,例如

p.important{color:red;}必須同時符合兩個選擇器條件的元素才能生效。

包含選擇器、子代選擇器

後位選擇器可以選擇作為某一元素後的元素,例如:

h1 em{color:red},這個規則會把作為h1元素後代的em元素的文字變成紅色,其他em文字不會被這條規則作用。

子選擇器

和後代選擇器類似,但是只會作用於元素的某直系後代。例如

h1>strong{color:red;}是作用在h1元素中第一個層級strong元素上,其他層級不受影響

相鄰兄弟選擇器

如果需要選擇緊接在另一個元素後的元素,而且兩者有相同的父元素,可以使用相鄰兄弟選擇器,例如

h1+p {margin-top:50px;}選擇緊接在h1元素後出現的段落,h1與p元素擁有相同的父元素

選擇器分組

同時作用於多個元素的選擇器,例如

h2,p{color:gray;}會同時作用於h2元素與p元素。 *為通配符選擇器,可與任何元素匹配

偽元素選擇器

  1. #:first-line{color:red;}文字首行設定特殊樣式

  2. :first-letter{color:red;}文字首字母設定特殊樣式


:after、:before未選擇器

#:before{}可與在元素內容的前面插入內容,內容可用content指定,
:after{}可與在元素內容的後面插入內容,內容可用content指定,例如

p:before{
    content:url("img.png");}
登入後複製

after、before可與配合quotes使用,quotes可與設定巢狀引用的引號類型

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }</style>
登入後複製

after、before配合計數器使用可與利用計數器在文字前面加上多層編號,這個可以專門開篇文章了,這裡不再詳述。

偽類別選擇器

  1. :root選擇器符合文件根元素

  2. #:first-child指定當元素是其父級的第一個子級的樣式

  3. :last-child指定當元素是其父級的最後一個子級的樣式

  4. :nth-child(n)指定當元素是其父級的第n個子級的樣式

    1. n為

      odd時符合當元素是其父級奇數個子級的樣式

    2. n為

      even時符合當元素是其父級偶數個子級的樣式

    3. n為

      m*n+p時,符合當元素是其父級符合第m*n+p個子級的樣式

  5. :nth-last-child(n)指定當元素為其父層級的倒數第n個子級的樣式

  6. :only-child指定當元素是其父級唯一子元素時生效

  7. :empty指定空元素的樣式

元素狀態的偽類別選擇器

  1. :hover當滑鼠指標位於元素上的樣式

  2. :focus取得焦點的元素的樣式

  3. #:enabled啟用的元素的樣式

  4. :disabled禁用的元素的樣式

  5. #:checked被選取的元素的樣式(checkbox,radio )

  6. ::selection被使用者選取的部分元素樣式

  7. ##:not(selector)選擇不是這個選擇器的樣式

  8. :target選擇目前活動的#news 元素,一般配合錨點使用

以上是關於css選擇器知識詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板