首頁 > 開發者 > CSS

關於css選取器知識詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

匯入外部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表示的是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個子級的樣式

    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 元素，一般配合錨點使用

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More