HTML和CSS前端教程03-CSS選擇器
阿新 • • 發佈：2019-01-22
文件中 創建 ava 產生 set 只有一個 href 第一個元素 包含 1.通用選擇器
2.元素選擇器
3.ID選擇器
4. 類選擇器
5. 屬性選擇器
(3) 偽元素選擇器
1. 塊級首行
2. 塊級首字母
3. 文本前插入
3. 文本後插入
1. 結構性偽類
目錄
- 1. CSS定義
- 2. 創建CSS的三種方法
- 2.1. 元素內嵌（權重最高）
- 2.2. 文檔內嵌
- 2.3. 外部引用
- 3. CSS層疊和繼承
- 3.1. 瀏覽器樣式
- 3.2. 樣式表層疊
- 3.3. 樣式繼承
- 4. CSS選擇器
- 4.1. 選擇器的總匯
- (1) 基本選擇器
- (2) 復合選擇器
- (3) 偽元素選擇器
:: - (4) 偽類選擇器
- 4.1. 選擇器的總匯
1. CSS定義
層疊樣式表
2. 創建CSS的三種方法
2.1. 元素內嵌（權重最高）
<p style="color:red;font-size:50px;">2.2. 文檔內嵌
通過選擇器的方法調用指定的元素並設置相關的CSS
<style type="text/css"> p{ color:red; font-size: 30px; } </style>
2.3. 外部引用
- 定義一個style01.css文件
@charset "utf-8";
p{
color:red;
font-size: 30px;
}- 在主文件中應用style
<!--在header中-->
<link rel="stylesheet" type="text/css", href="style01.css">大量HTML使用同一組CSS，就可以將這些樣式保存到一個單獨的.CSS文件中，通過link引用就可以了
3. CSS層疊和繼承
- 樣式表層疊： 同一元素通過不同方式設置樣式表所產生的樣式重疊
- 樣式表繼承： 某一個被嵌套的元素得到它父類元素樣式
- 瀏覽器樣式： 這個元素在瀏覽器運行時附加的樣式
3.1. 瀏覽器樣式
<b>b元素有加粗元素</b>
<span style="font-weight:bold;">span元素沒有加粗樣式，但是可以設置</span>
<b style="font-weight:normal;">b元素手動取出加粗元素</b>3.2. 樣式表層疊
<link rel="stylesheet" type="text/css", href="style01.css"> <style type="text/css"> p{ color:red; font-size: 30px; } </style> <!--同時疊加（不是覆蓋）三個元素--> <p style = "font-size:50px; color:orange;">我要疊加三個樣式</p>
優先級： 元素內嵌 <- 文檔內嵌 <- 外部引用 <- 瀏覽器
可以在不同樣式中添加!important關鍵字來強行設置優先級
color: green !important
3.3. 樣式繼承
<style type="text/css">
p{
color:red;
font-size: 30px;
}
</style>
<p>這是<b>HTML5</b></p> 此時顯示的是這是HTML5,我們只設置了p為紅色，但是b也為紅色了，因為b是在p內部
- 如果一個元素沒有設置父元素相關的樣式，那麽就會使用繼承機制將父類樣式繼承下來
- 樣式繼承只適用於元素的外觀(文字，顏色，字體等)，布局樣式無法繼承
4. CSS選擇器
定位到你想要設計的樣式元素來設計元素
4.1. 選擇器的總匯
(1) 基本選擇器
使用頻率最高的一些選擇器
1.通用選擇器*
*表示通用選擇器，匹配所有HTML元素包括<HTML>和<body>標簽
可以為所有元素匹配並配置樣式，但是無法篩選不必要元素
定義一個CSS
@charset "utf-8"
* {
border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/
<link rel="stylesheet" type="text/css", href="style01.css">
<p>這是一個段落</p>
<p>這是一個加粗</p>
<span>這是一個什麽都沒有</span>
2.元素選擇器p
@charset "utf-8"
p {
border: 1px solid red;
}
/*通用選擇器可以匹配到html和body元素*/3.ID選擇器#adc
ID是唯一的，不可重復使用
@charset "utf-8"
#abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p id="abc">這是一個段落</p>
<p>這是一個加粗</p>
<span>這是一個什麽都沒有</span>
4. 類選擇器.
@charset "utf-8"
.abc {
border: 1px solid red;
}
<link rel="stylesheet" type="text/css", href="style01.css">
<p class="abc">這是一個段落</p>
<p class="abc">這是一個加粗</p>
<span>這是一個什麽都沒有</span>
也可以限定元素
@charset "utf-8"
p.abc {
border: 1px solid red;
}
/*只能適用於段落*/也可以使用多個class
@charset "utf-8"
.abc {
border: 1px solid red;
}
.def {
font-size: 30px;
}
<p class="abc def">這是一個加粗</p>5. 屬性選擇器[...]
@charset "utf-8"
[href]{
color: red;
}<a href="http://www.baidu.com">這是一個百度</a>也可以設置相關的屬性值
@charset "utf-8"
[type="password"]{
border: 1px solid red;
}<input type="password">通過正則表達式來設置匹配
@charset "utf-8"
[href^="http"]{
color: orange;
}
/*只能開頭是http才能匹配*/<a href="http://www.baidu.com">百度</a>
<a href = "javascript:void(0)">好搜</a>通過精確匹配
@charset "utf-8"
[href*="baidu"]{
color: orange;
}
/*只能包含baidu才能匹配*/(2) 復合選擇器
將不同選擇器進行組合形成的新的特定匹配
1.分組選擇器
多個選擇器逗號分隔，同時設置一組樣式
@charset "utf-8"
p,b,i,span {
color: orange;
}
#abc,.abc,i,span {
color: orange;
}
2.後代選擇器
選擇<p>元素內部所有的<b>元素，不在乎<b>的層次深度
@charset "utf-8"
p b {
color: orange;
}<p>這是一個HTML5<b>教程</b></p>效果為： 這是一個HTML5教程
3. 子選擇器
與後代選擇器類似，但是只能運用於兒子，孫子就不行了
```css
@charset "utf-8"
p>b {
color: orange;
}
```
4.相鄰兄弟選擇器
匹配第一個元素相鄰的第二個元素
@charset "utf-8"
p+b {
color: orange;
}5.普通兄弟
類似，只是靠的不是特別近
@charset "utf-8"
p~b {
color: orange;
}(3) 偽元素選擇器::
1. 塊級首行::first-line
- 只適用於
<p>、<div>等的首行文本選定
:: first-line {
color: orange;
}2. 塊級首字母::first-letter
p:: first-letter {
color: orange;
}3. 文本前插入::before
- 在文本前插入內容
a:: before {
content: ‘點擊-‘;
}3. 文本後插入::after
(4) 偽類選擇器
1. 結構性偽類:
- 可以根據元素在文檔中的位置選擇元素
1.1. 根元素選擇器
:root {
border: 1px solid red;
}1.2. 子類選擇器
ul>li:first-child {
color: red;
}
/*父類的第一個兒子*/ul>li:last-child {
color: red;
}
/*父類的最後一個兒子*/ul>li:only-child {
color: red;
}
/*選擇只有一個子元素的那個元素*/dive>p: only-of-type {
color: red;
}
/*選擇只有一個指定類型的子元素的那個元素*/1.3.nth-child(n)系列
ul>li:nth-child(2) {
color: red;
}
/*選擇第2個*/ul>li:nth-last-child(2) {
color: red;
}
/*選擇倒數第2個*/ul>li:nth-of-type(2) {
color: red;
}
/*特定類型第2個*/ul>li:nth-last-of-type(2) {
color: red;
}
/*特定類型倒數第2個*/2.UI偽類
用於匹配表單的數據
enabled
input:enabled {
border: 1px solid red;
}
/*選擇表單中的enable元素*/<form>
<input tupe="text" disabled>
<input tupe="text">
</form>checked
input:checked {
display: none;
}default
input:default {
display: none;
}valid和not valida
input:valid {
border: 1px solid green;
}
input:invalid {
border: 1px solid red;
}required
input:required {
border: 1px solid red;
}3. 動態偽類
根據條件改變匹配元素
link-超鏈接
/*Url沒有訪問的顏色*/
a:link {
color: red;
}
/*Url被點擊的顏色*/
a:visited {
color: blue;
}
/*鼠標懸停的顏色*/
a:hover {
color: orange;
}
/*鼠標長按的顏色*/
a:active {
color: green;
}<a href="baidu.com">百度</a>focus-文本框獲取的
/*鼠標獲取到文本框的顏色*/
input:focus {
border: 1px solid green;
}其他偽類選擇器
not否定選擇器
/*選擇百度除外的URL*/
a:not([href*="baidu"]) {
color: green;
}empty
/*空元素隱藏*/
:empty {
display: none;
}target-定位到錨點
/*空元素隱藏*/
b:target {
color: red;
}HTML和CSS前端教程03-CSS選擇器