【目錄】 一、CSS基礎 1、什麼是CSS3，如何學習？ 2、CSS的註釋方法 3、CSS語法結構 4、CSS的三種引入方式 二、CSS選擇器 1、基本選擇器 2、組合選擇器 3、屬性選擇器 一、CSS基礎 1、什麼是CSS3，如何學習？ CSS3 就是 CSS（Cascading Style Sh ...
【目錄】
一、CSS基礎
1、什麼是CSS3，如何學習？
2、CSS的註釋方法
3、CSS語法結構
4、CSS的三種引入方式
二、CSS選擇器
1、基本選擇器
2、組合選擇器
3、屬性選擇器
4、群組選擇器
5、交叉選擇器
6、偽類選擇器
7、偽元素選擇器
8、選擇器優先順序
一、CSS基礎
1、什麼是CSS3，如何學習？
CSS3 就是 CSS（Cascading Style Sheet ）語言，也屬於標記語言，數字3 是該語言的版本號；
CSS語言開發的文件尾碼名是 .CSS，通過在HTML文件中引入該 CSS文件 來控制HTML代碼的樣式（CSS 也可直接寫在HTML文件中）。
如何學習CSS？
css的學習流程
1.先學如何查找標簽
css查找標簽的方式你一定要學會
因為後面所有的框架封裝的查找語句都是基於css來的
css選擇器很簡單很好學不要有壓力!!!
2.之後再學如何添加樣式
2、CSS的註釋方法
/*單行註釋*/ /* 多行註釋1 多行註釋2 多行註釋3 */ 通常我們在寫css樣式的時候也會用註釋來劃定樣式區域(因為HTML代碼多所以對呀的css代碼也會很多) /*這是博客園首頁的css樣式文件*/ /*頂部導航條樣式*/ ... /*左側菜單欄樣式*/ ... /*右側菜單欄樣式*/ ...
3、CSS語法結構
選擇器 {
屬性1:值1;
屬性2:值2;
屬性3:值3;
屬性4:值4;
}
4、CSS的三種引入方式（書寫方式）
1.style標簽內部直接書寫
<style>
h1 {
color: burlywood;
}
</style>
2.link標簽引入外部css文件(最正規的方式 解耦合)
<link rel="stylesheet" href="mycss.css">
3.行內式(一般不用)
<h1 style="color: green">老闆好 要上課嗎?</h1>
二、CSS選擇器
1、基本分類 以及 語法格式
/* 基本選擇器 */
/*
# id選擇器
# 類選擇器
# 元素/標簽選擇器
# 通用選擇器 */
<style>
/* id選擇器*/
/* !*找到id是d1的標簽 將文本顏色變成綠黃色*! */
#d1 {
color: greenyellow;
}
/* 類選擇器 */
/* !*找到class值裡面包含c1的標簽*! */
.c1 {
color: red;
}
/* 元素(標簽)選擇器 */
/* !*找到所有的span標簽*! */
span {
color: red;
}
/*通用選擇器*/
/* !*將html頁面上所有的標簽全部找到*! */
*{
color: green;
}
</style>
# 語法技巧—— p#d1.c1 （插件 emmet 的功能）
2、組合選擇器
組合選擇器分類：
# 後代選擇器 （ 連接標識符： 空格# 兒子選擇器 （ 連接標識符： >
# 毗鄰選擇器 （ 連接標識符： +
# 弟弟選擇器 （ 連接標識符： ~
/* 在前端 我們將標簽的嵌套用親戚關係來表述層級 */
<div>
<p>div p</p>
<p>div p
<span>div p span</span>
</p>
<span>span</span>
<span>span</span>
</div>
/* div裡面的p span都是div的後代
p是div的兒子
p裡面的span是p的兒子 是div的孫子
div是p的父親
...
*/
/*後代選擇器*/
div span {
color: red;
}
/*兒子選擇器*/
div>span {
color: red;
}
/*毗鄰選擇器*/
/* !*同級別緊挨著的下麵的第一個(即 只能匹配 直接兄弟關係的標簽)*! */
div+span {
color: aqua;
}
/*弟弟選擇器*/
/*同級別下麵所有的span*/
div~span {
color: red;
}
3、群組選擇器
<style>
/*逗號表示併列關係*/
div,p,span {
color: yellow;
}
/* 多種選擇器組合使用，表示併列關係使用逗號分隔 */
#d1,.c1,span {
color: orange;
}
</style>
4、交叉選擇器
/* 連接標識符 緊挨著(沒有任何連接符) */
/* 交叉選擇器本質上是對一個目標標簽的多個名字的同時表示 */
div.box#ele.tag { /*div是標簽名，box和tag都是class屬性值，ele是id屬性值*/
/* 樣式塊 */
}
<!-- 標簽名div、class名box及tag和id名ele都是對一個目標標簽的修飾空格隔開
<!-- class屬性擁有多個值時，多個值之間用空格隔開 -->
<div class="box tag" id="ele"></div>
5、屬性選擇器
/* 屬性選擇器 */
/*
1 含有某個屬性
2 含有某個屬性並且有某個值
3 含有某個屬性並且有某個值的某個標簽
# 屬性選擇器是以[]作為標誌的 */
/* !*將所有含有屬性名是username的標簽背景色改為紅色*! */
[username] {
background-color: red;
}
/* !*找到所有屬性名是username並且屬性值是jason的標簽*! */
[username='jason'] {
background-color: orange;
}
/* !*找到所有屬性名是username並且屬性值是jason的input標簽*! */
input[username='jason'] {
background-color: wheat;
}
6、偽類選擇器 ——標簽 ：標簽狀態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color: black;
}
a:link { /*訪問之前的狀態*/
color: red;
}
a:hover { /*需要記住*/
color: aqua; /*滑鼠懸浮態*/
}
a:active {
color: black; /*滑鼠點擊不鬆開的狀態 激活態*/
}
a:visited {
color: darkgray; /*訪問之後的狀態*/
}
p {
color: darkgray;
font-size: 48px;
}
p:hover {
color: white;
}
input:focus { /*input框獲取焦點(滑鼠點了input框)*/
background-color: red;
}
</style>
</head>
<body>
<a href="https://www.jd.com/">小軒在不在?</a>
<p>點我有你好看哦</p>
<input type="text">
</body>
</html>
7、偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 為首字元設置樣式 如首個文字為大寫 */
p:first-letter {
font-size: 48px;
color: orange;
}
/*在文本開頭 用css在前面或者後面 添加內容，用CSS添加的內容時無法選中複製的*/
p:before {
content: '你說的對';
color: blue;
}
p:after {
content: '雨露均沾';
color: orange;
}
</style>
</head>
<body>
<p>生命如此多嬌</p>
</body>
</html>
8、選擇器優先順序——不同選擇器 同時控制 同一標簽的同一屬性
（1）普通選擇器的優先順序
1.選擇器相同 書寫順序不同
就近原則:誰離標簽更近就聽誰的（同級的執行順序是從上而下，因此以最後執行的樣式為準）
2.選擇器不同
行內 > id選擇器 > 類選擇器 > 標簽選擇器
精確度越高，越有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="mycss1.css"> -->
<style>
#d1 {
color: aqua;
}
.c1 {
color: orange;
}
p {
color: red;
}
</style>
<link rel="stylesheet" href="mycss1.css">
</head>
<body>
<p id="d1" class="c1" style="color: blue">你好鴨子</p>
</body>
</html>
<head> <style> * { width: 50px; height: 50px; background-color: red; color: pink; } div { width: 60px; height: 60px; background-color: orange; } .box { width: 70px; height: 70px; } #ele { width: 80px; } </style> </head> <body> <div class="box" id="ele">文字內容</div> </body> <!-- 1. 四種選擇器都控制目標標簽的寬度，最終目標標簽寬度為80px，所以id選擇器優先順序最高 2. 三種選擇器都控制目標標簽的高度，最終目標標簽寬度為70px，所以class選擇器優先順序其次 3. 二種選擇器都控制目標標簽的背景顏色，最終目標標簽背景顏色為orange，所以標簽選擇器優先順序再次 4. 只有一種選擇器控制目標標簽的字體顏色，目標標簽字體顏色一定為pink 優先順序：通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器 -->優先順序：通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器
（2）複雜組合選擇器的優先順序
1. 複雜選擇器的種類並不會影響優先順序
-- 後代：div #ele | 兄弟：div~#ele | 交叉：div#ele 優先順序一樣
2. 複雜選擇器本質是通過同類型(簡單選擇器)的個數來確定優先順序
-- 三層標簽選擇器後代：body div i 大於 兩層標簽選擇器後代：div i | body i
3. 簡單選擇器的優先順序起關鍵性作用，也就是一個id選擇器要大於無限個class選擇器，一個class選擇器要大於無限個標簽選擇器
-- id選擇器：#i 大於 n層class選擇器：.box .i
-- class選擇器：.box 大於 n層標簽選擇器：body div
參考閱讀：
https://www.cnblogs.com/xiaoyuanqujing/articles/11669933.html
https://www.cnblogs.com/xiaoyuanqujing/articles/11669943.html
https://www.cnblogs.com/Dominic-Ji/p/10474769.html
