css選擇器

時間 2019-11-17

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

導入外部css樣式表的方法

使用link標籤導入外部css樣式表
<link rel="stylesheet" href="css/demo01.css">
在樣式表中import(導入)外部樣式表
@import url("/crazy-html5/06css/css/demo01.css");

使用內部樣式表

內部樣式表只能做用於某一個網頁，定義方式爲在head頭部添加style標籤，在style標籤中便可添加頁面樣式。css

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

選擇器知識點

元素屬性選擇器

普通標籤選擇器
table:{background:red;}
含有某個屬性的標籤
div[id]{background:red;}表示含有id屬性的div元素
含有某個屬性而且屬性值爲特定值的標籤
div[id=aaa]{background:red;}表示含有id屬性，而且id=aaa的div元素
含有某個屬性而且屬性值以特定值開頭的元素
div[id=^aaa]{background:red;}表示含有id屬性，而且id的值是以aaa開頭的div元素
含有某個屬性而且屬性值以特定值結尾的元素
div[id=$c]{background:red;}表示含有id屬性，而且id的值是以c結尾的div元素

ID選擇器

id選擇器，指定id爲特定值的元素，好比#mydiv表示的是id爲mydiv值的元素，id選擇器前面要添加符號#html

Class選擇器

類選擇器是匹配class值的元素，選擇器前面必須添加符號.，好比.myclass表示的是全部class值爲myclass的元素。html5

類選擇器能夠結合元素選擇器使用，好比p.important{color:red;}必須同時符合兩個選擇器條件的元素才能生效。url

包含選擇器、後代選擇器

後代選擇器能夠選擇做爲某元素後代的元素，例如：h1 em{color:red},這個規則會把做爲h1元素後代的em元素的文本變爲紅色，其餘em文本不會被這條規則做用。指針

子選擇器

和後代選擇器相似，可是隻會做用於元素的某直系後代。例如h1>strong{color:red;}是做用於h1元素中第一層級strong元素上，其餘層級不受影響code

相鄰兄弟選擇器

若是須要選擇緊接在另外一個元素後的元素，並且二者有相同的父元素，可使用相鄰兄弟選擇器，例如h1+p{margin-top:50px;}選擇緊接在h1元素後出現的段落，h1與p元素擁有相同的父元素htm

選擇器分組

同時做用於多個元素的選擇器，例如h2,p{color:gray;}會同時做用於h2元素與p元素。
*爲通配符選擇器，可與任何元素匹配文檔

僞元素選擇器

:first-line{color:red;}文本首行設置特殊樣式
:first-letter{color:red;}文本首字母設置特殊樣式

:after、:before未選擇器get

:before{}可與在元素內容的前面插入內容，內容可用content指定，
:after{}可與在元素內容的後面插入內容，內容可用content指定，好比io

p:before{
    content:url("img.png");
}

after、before可與配合quotes使用，quotes可與設置嵌套引用的引號類型

<style>
    div>div {
        quotes: "《" "》"
    }
    div>div::before{
      content: open-quote;
    }
    div>div::after{
      content:close-quote;
    }
</style>

after、before配合計數器使用
可與利用計數器在文本前面添加多級編號，這個能夠專門開篇文章了，這裏再也不詳述。

僞類選擇器

:root選擇器匹配文檔根元素
:first-child指定當元素是其父級的第一個子級的樣式
:last-child指定當元素是其父級的最後一個子級的樣式
:nth-child(n)指定當元素是其父級的第n個子級的樣式
1. n爲odd時匹配當元素是其父級奇數個子級的樣式
2. n爲even時匹配當元素是其父級偶數個子級的樣式
3. n爲m*n+p時，匹配當元素是其父級符合第m*n+p個子級的樣式
:nth-last-child(n)指定當元素是其父級的倒數第n個子級的樣式
:only-child指定當元素是其父級惟一子元素時生效
:empty指定空元素的樣式

元素狀態的僞類選擇器

:hover當鼠標指針位於元素上的樣式
:focus得到焦點的元素的樣式
:enabled啓用的元素的樣式
:disabled禁用的元素的樣式
:checked被選中的元素的樣式(checkbox,radio)
::selection被用戶選取的部分元素樣式
:not(selector)選擇不是這個選擇器的樣式
:target選擇當前活動的 #news 元素，通常配合錨點使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。