常用選擇器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css選擇器</title>
<style>
常用選擇器：
#abc{
color: aqua; /*字型顔色*/
letter-spacing: 10px; /*字型間距*/
text-indent: 10px; /*文本縮進*/
text-align: center; /*文本對齊*/
font-size: 10px; /*字型大小*/
font-family:'Times New Roman', Times, serif; /*字型字形*/
font-weight: bold; /*字型加粗*/
font-style: italic; /*斜體字*/
line-height: 30px; /*行高*/
text-decoration: underline; /*文本裝飾，下劃線:underline*/
outline: aqua 5px dashed; /*外輪廓*/
border: dashed red 2px; /*表格邊框*/
cursor: crosshair; /*滑鼠樣式*/
}
.blue{
color: blue;
}
.size{
font-size: 20px;
}
複合選擇器：
b.blue{
font-size: 20px;
} /*交集選擇器*/
h1,span{
color: green;
}/*并集選擇器*/
/* *{}可以選中所有h1,span */
關系選擇器：
div > span{
color:salmon;
}/*子元素選擇器，選擇比div小一級的span元素*/
div span{
color: silver;
}/*後代選擇器，選擇div裡的所有span元素*/
p + span{
color:coral;
}/*選擇p後面緊挨的那個span元素*/
p ~ span{
color: cornsilk;
}/* 選擇p後面所有的span元素*/
屬性選擇器：
p[class]{
color: aqua;
}
/* [屬性名]選擇含有指定屬性的元素 */
p[class=12]{
color: aqua;
}
/* [屬性名=屬性值]選擇含有屬性和屬性值的元素 */
p[class^=12]{
color: aqua;
}
/* [屬性名^=屬性值]選擇以12屬性值開頭的元素 */
p[class$=34]{
color: aqua;
}
/* [屬性名$=屬性值]選擇以34屬性值結尾的元素 */
p[class*=34]{
color: #00ffff;
}
/* [屬性名*=屬性值]選擇屬性值有34屬性的元素 */
僞類選擇器：
ul>li:first-child{
color: aqua;
}
/* :first-child--第一個子元素，:last-child--最後一個子元素，
:nth-child()--選中第n個子元素，odd選中奇數，even選中偶數 */
a:link{
color: azure;
}
/* link表示正常的連結 給超連結設定屬性*/
a:visited{
color: red;
}
/* :visited用來表示通路過的連結，由于隐私原因visited這個僞類隻能修改連結的顔色 隻适用于超連結*/
a:hover{
font-size: 30px;
}
/* :hover用來表示滑鼠移入的狀态 */
a:active{
color: royalblue;
}
/* 表示滑鼠正在點選的狀态 */
僞元素選擇器：
:root{
background-color: aqua;
/* 設定整個網頁的樣式 */
}
p::first-letter{
font-size: 50px;
}
/* 表示第一個字母 */
p::first-line{
background-color: salmon;
}
/* ::first-line 表示第一行 */
p::selection{
color: rgb(7, 7, 7);
}
/* ::selection 表示選中的内容 */
p::before{
content: '開始';
color: slateblue;
}
p::after{
content: '結束';
color: tan;
}
/* 元素的開始和結束位置；必須結合content使用，開始和結束顯示content中的内容；
并且無法用滑鼠選中 */
樣式的繼承：
p{
color: bisque;
}
/* 為一個元素設定的樣式也會應用到他的後代元素上，并不是所有的樣式都會被繼承，比如布局 背景等，38講 */
選擇器的權重：
div{
color:blanchedalmond;
}
.red{
color: brown;
}
/* 樣式沖突，通過不同的選擇器選中相同的元素，并且為相同的樣式設定不同的值時，
此時發生樣式的沖突，應用哪個樣式由選擇器的權重（優先級）決定，
權重：
内聯樣式 1,0,0,0
id選擇器 0,1,0,0
類和僞類選擇器 0,0,1,0
元素選擇器 0,0,0,1
通配選擇器（*） 0,0,0,0
繼承選擇器 沒有優先級
比較優先級時需要将優先級相加計算，分組選擇器單獨計算,(一般選擇器越具體優先級越高)
如果優先級計算後相等，則優先使用靠下的
可以在某一個樣式後面加一個（！important）就可以擷取到最高的優先級，（開發中這個要慎用！）
39講 */
.box1{
width: 200px;
height: 200px;
background-color: aqua;
}
/* 不同的螢幕像素大小不同 */
.box2{
width: 50%;
height: 50%;
background-color: beige;
}
/*百分比可以将屬性值設定為相對于父元素屬性的百分比
并且跟随父元素的改變而改變
40講*/
.box3{
width: 10em;
height: 10em;
background-color: blanchedalmond;
}
/* em是相對于字型大小來計算的，1em = 1fint-size =10個像素，
rem相對于根元素（html）來計算大小
41講*/
.box4{
background-color: rgb(230, 61, 201);
}
/* css中可以用顔色名直接設定，但是很不友善，
RGB值：
RGB通過三種顔色的不同濃度來調配出不同的顔色
R red,G green,B blue
每一種顔色在0-255之間（0&-100%）
文法：RGB（紅色,綠色,藍色）*/
/* RGBA:
RGB的基礎上增加了一個A表示不透明度（紅色,綠色,藍色，A）
1表示完全不透明，0表示完全透明，0.5半透明 */
/* 十六進制的RGB值：
文法：#紅色綠色藍色
顔色濃度通過 ff0000
如果顔色兩位兩位重複可以進行簡寫
如#aabbcc=#abc
42講*/
.box4{
background-color: hsl(hue, saturation, lightness);
}
/* HSL值（工業設計用的多）H：色相(0-360) S：飽和度(0%-100%) L：亮度(0%-100%) 43講 */
/* 網頁是一個多層結構，一層層疊起來，通過css分别設定每一層的樣式，使用者隻能看到最頂上一層，
最底下的一層稱為文檔流，是網頁的基礎，我們建立的元素預設在文檔流中排列
元素隻有兩種狀态：在文檔流中，不在文檔流中。
元素在文檔流的特點：
塊元素<div>：會在頁面中獨占一行，預設寬度是父元素的全部，預設高度會被内容撐開
行内元素<span>：行内元素不會獨占頁面的一行，如果一行不能容納所有則自動跳到第二行，預設高度和内容被内容撐開 44講*/
</style>
</head>
<body>
</body>
</html>
![關于:first-child的誤區[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)