幾種css常用選擇器實例詳解-css教學-PHP中文網

幾種css常用選擇器實例詳解

伊谢尔伦

發布： 2017-05-30 13:36:11

原創

2190 人瀏覽過

匯入外部css樣式表的方法

使用link標籤匯入外部css樣式表

<link rel="stylesheet" href="css/demo01.css">

登入後複製

在樣式表中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表示的是id為myp值的元素，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個子級的樣式

n為odd時匹配當元素是其父級奇數個子級的樣式

n為even時匹配當元素是其父級偶數個子級的樣式

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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

幾種css常用選擇器實例詳解