title | layout | categories | tags | excerpt |
---|---|---|---|---|
CSS選擇器詳細介紹 |
post |
CSS |
css選擇器 內聯嵌入外部式 ID類選擇器區別 僞元素 |
css選擇器詳細介紹與舉例 |
文章出自個人博客https://knightyun.github.io/2018/05/02/css-selector,轉載請申明
目錄
基礎
CSS(層疊樣式表Cascading Style Sheets),用於修飾HTML網頁內容,根據使用位置不同可分爲三種樣式:內聯式,嵌入式,外部式。
- **內聯式:**標籤
<>
內部使用,例如:
<p style = "color: red; font-size: 20px"></p>
。
- **嵌入式:**寫在
<style></style>
之中,並放在<head></head>
內,例如:
<head>
<!--這裏放其它標籤,例如 meta,link,script之類-->
<style>
p {
color: red;
font-size: 20px;
}
</style>
</head>
- **外部式:**寫在外部
.css
文件中,使用如下方式引用:
<link rel = "stylesheet" type="text/css" href="css/index.css">
href
寫.css
文件路徑,可以是絕對路徑或相對路徑,相對路徑類似於:../../css/index.css
,絕對路徑類似於:/css/index.css
。
選擇器(Selector)
三種樣式中,嵌入式和外部式需要使用到選擇器,也是組成 css 樣式的主體例如上例中的 p { }
,主要分爲:
元素選擇器、類選擇器、ID選擇器、子選擇器、後代選擇器、通用選擇器、屬性選擇器、僞元素選擇器、組選擇器、相鄰同級選擇器。
元素選擇器(Type selector)
也叫類型選擇器,可以理解爲標籤選擇器,最基本的選擇器,就是使用常見的HTML元素,例如:body { }
, h { }
, p { }
, div { }
, span { }
, a { }
等。
類選擇器(Class selector)
前提需要在標籤內使用類標記某處文檔,類似:class = "myClass"
,然後它的選擇器的格式就爲:.myClass { }
,就是在類名前面加個小數點。
ID選擇器(ID selecctor)
和類選擇器類似,前提需要在標籤內使用ID標記某處文檔,類似:id = "myId"
,格式爲:#myId { }
,就是在 ID 前加個符號 #
。
ID選擇器與類選擇器的區別: 類選擇器可以使用多次,ID選擇器只能使用一次,例如:
<p class = "one">This is a test content, </p>
<p class = "one">hello world !</p>
,但是ID不能這樣。 並且能同時使用多個類分別標記不同樣式,例如:<p class = "one two"></p>
,ID也不能這樣。
子選擇器(Child selector)
用於指定標籤元素的子元素,使用符號 >
隔開父元素與子元素,例如:
HTML:
<p1>
Hello World !!!
<p2>This is a test content</p2>
</p1>
CSS:
p1>p2 {
color: green;
font-size: 20px;
}
這裏就指定了父元素 p1
的子元素 p2
的樣式,但是只作用於子元素,不作用於父元素。
後代選擇器(Descendant selector)
用於指定標籤元素的後代元素,使用空格符號隔開,例如: html:
<p1>
Hello world !!!
<p2>
This is a <a>test</a> content
</p2>
</p1>
css:
p1 a {
color: green;
font-size: 20px;
}
這裏指定了元素 p1
的後代元素 a
的樣式,注意這裏不是子代元素 p2
,就是作用於所有指明的後代元素。
子代選擇器與後代選擇器的區別: 顧名思義的理解,後代就是包含子代在內的所有下代的元素,可以跨越子代直接作用於孫代;而子代只包含父級的第一代子代元素。 子代選擇器使用符號
>
隔開,後代選擇器使用空格
隔開。
通用選擇器
顧名思義,使用通配符 *
設置 html 中所有標籤的樣式,例如:
* {
color: red;
font-size: 20px;
}
這樣就設置了HTML中所有的標籤的樣式了。
屬性選擇器(Attribute selector)
對具有指定的屬性(attribute)設置樣式,使用方括號符號 [ ]
。
簡單屬性選擇器
不用管屬性值,例如:
[href] {color: red}
a [href] {color: red}
a [href] [title] {color: red}
以上格式都能實現相同效果,即具有該屬性的
a
標籤。
屬性和值選擇器
具有指定屬性與其指定值的標籤,格式爲:
a [title = "link"] {color: red}
僞元素選擇器
HTML中存在一類與元素控制內容相同的抽象元素,但是並不實際存在於HTML文檔,給標籤的某種狀態設置樣式,例如單擊某內容或鼠標滑過某內容,然後設置改變的樣式。僞元素種類較多,只列舉幾個常用例子。
:active
爲激活的元素設置樣式,就是用戶單擊該標籤時的樣式,例如:
a:active {color: red}
則用戶點擊這個鏈接文本時顏色變爲紅色。
:hover
懸停狀態僞元素,爲用戶鼠標所停靠的標籤設置樣式,例如:
p:hover {color: red}
則鼠標停留在該段落時,段落內容變爲紅色。
:focus
用於具有焦點的元素,常用就是輸入框,用戶點擊輸入框準備輸入時則該輸入框就具有了焦點,例如:
input:focus {background-color: green}
則點擊輸入框時背景顏色變爲綠色。
::selection
爲選中的元素設置樣式,例如:
::selection {color: red}
爲文檔中鼠標選定的內容設置爲紅色字體。注意可以追加應用範圍:p::selection
表示段落中選中的字體才應用該樣式,不追加直接使用 ::selection
表示應用於所有內容。
火狐瀏覽器支持需要使用 -moz-selection
。
:first-child
爲元素的第一子代應用樣式,例如:
p:first-child {color: red}
這個比較好理解。
:nth-child()
爲元素的父元素的第 n 個子代設置樣式,只是括號內需要輸入數字表示第幾代,例如:
p:nth-child(2) {color: red}
假如p標籤父元素是body,就表示爲body的第二個子元素設置樣式。
組選擇器
爲多個元素設置相同樣式時,可以使用逗號分隔元素,達到同時設置的效果。例如:
p1,p1 {color: red}
表示爲p1和p2 同時設置相同的樣式。
相鄰同級選擇器
選擇與指定元素同級的相鄰的第一個某元素,設置樣式,例如:
div+p {color: red}
表示爲 p 設置樣式,並且這個 p 與 div 同級,並且是與 div 相鄰的第一個 p,div 內部的 p 並不包含在內。