插入樣式的三種方法
- 內聯(lián)樣式表（行內）
- 內部樣式表（style中）
- 外部樣式表
- 創(chuàng)建一個外部樣式表
- 在head中使用link元素插入樣式表
<title>Document</title>
<link rel="stylesheet" href="./style.css" media="screen" title="no title">
- 單一元素的多個屬性之間用分號隔開佃延；若只有一個可以省略
- 多個元素之間用逗號隔開
- 如果值為若干單詞部逮，則要給值加引號;除了這種情況外其他時候不可以加引號
- css代碼的注釋
- 樣式的優(yōu)先順序:
- 設計者設計的樣式>瀏覽器用戶自定義的樣式>瀏覽器自設的樣式
- 強制優(yōu)先級：！important
- 行內（內聯(lián)）樣式
- 內部樣式：style中的樣式
- 外部樣式
- 層疊西采、繼承惕味、沖突
- 外觀樣式--比如字體僚稿、顏色可以繼承;而布局有關的樣式不可以繼承蹦掐，比如邊框等
- 可以在同一個 HTML 文檔內部引用多個外部樣式表。
CSS選擇器
-
常用選擇器
- 通用選擇器：“*”
*{color: red} - 元素選擇器
div{background: blue} - id選擇器:前面有一個 #
#div1{background: blue} - 類選擇器:前面加符號 .
.class{color: yellow} - 給一個元素加上多個類名
h3.class{background: rgb(207, 94, 87)} - 指定某一特定的類 ``
- 通用選擇器：“*”
-
屬性選擇器
- E[att] :選擇具有att屬性的E元素户辞。需要選擇有某個屬性的元素泌类，而不論屬性值是什么，可以使用簡單屬性選擇器底燎。
input[value][style]{background: rgb(24, 65, 82)}可以根據(jù)多個屬性進行選擇刃榨，只需將屬性選擇器鏈接在一起即可。
- E[att="val"]：選擇具有att屬性且屬性值等于val的E元素双仍。進一步縮小選擇范圍枢希，（只選擇有特定屬性值的元素。）
input[value="vip1"]{background: rgb(43, 184, 11)}- E[att~="val"]:選擇具有att屬性且屬性值有多個朱沃，其中一個的值等于val的E元素苞轿。
input[style~="15px"]{background: red}- E[att|="val"]:選擇具有att屬性且屬性值為以val開頭并用連接符"-"分隔的字符串的E元素茅诱。
p[lang|="en"]{background: rgb(182, 60, 215)}- E[att^="val"]:選擇具有att屬性且屬性值為以val開頭的字符串的E元素。
input[value^="vi"]{background: rgb(139, 201, 123)}- E[att$="val"]:選擇具有att屬性且屬性值為以val結尾的字符串的E元素搬卒。
input[value$="1"]{background: rgb(139, 201, 123)}- E[att*="val"]:選擇具有att屬性且屬性值為包含val的字符串的E元素瑟俭。
input[value*="i"]{background: rgb(139, 201, 123)} -
關系選擇器
- 后代選擇器（包含選擇器）ul li{}:后代選擇器又稱為包含選擇器。后代選擇器可以選擇作為某元素后代的元素契邀。
ul li{color: red}- 子元素選擇器ul>li:與后代選擇器相比摆寄，子元素選擇器只能選擇作為某元素子元素的元素,縮小了選擇范圍
ul>li{border: 1px solid}- 相鄰選擇符：E+F:選擇緊貼在E元素之后F元素。(一個)
h2+p{color: red}- 兄弟選擇器E~F:選擇E元素所有兄弟元素F坯门。(只可以選擇到之后的元素)（所有）
h2~p{color: red} -
偽元素選擇器
- E:first-letter/E::first-letter 設置元素內的第一個字符的樣式微饥。
p::first-letter{color: red}- E:first-line/E::first-line設置元素內的第一行的樣式。
p::first-line{font-size: 30px}- E:before/E::before在每個 E元素的內容之前插入內容古戴。用來和content屬性一起使用
a::before{ content: "點擊" }- E:after/E::after在每個E元素的內容之后插入內容欠橘。用來和content屬性一起使用
a::after{ content: url(../../..png) }- E::selection設置對象被選擇時的顏色。
a::selection{background: red}
-
偽類選擇器_結構偽類選擇器
- E:first-child 父元素的第一個子元素E允瞧。
li:first-child{color: red}- :root:選擇文檔的根元素简软。
:root{background: rgb(34, 56, 173)}- E:last-child:最后一個子元素E。
li:last-child{color: red}- E:only-child:僅有的一個子元素E述暂。（只有一個子元素）
li:only-child{color: red}- E:only-of-type:只有一種類型的子元素。（只有一個P元素）
p:only-of-type{color: rgb(145, 102, 147)}-
E:nth-child(n):元素的第n個子元素E建炫。
- 可以直接用數(shù)值：比如2
- 可以用奇數(shù)（odd）偶數(shù)(even)
- 可以用公式3n
h3:nth-child(2){color: red}#div1>h3:nth-child(2){color: red}h3:nth-child(odd){color: red}h3:nth-child(even){color: red}h3:nth-child(3n){color: red}tr:nth-child(3n+1){color: red} E:nth-last-child(n):匹配父元素的倒數(shù)第n個子元素E畦韭。
tr:nth-last-child(3n+1){color: red}- E:first-of-type :匹配同類型中的第一個同級元素E。
h3:first-of-type{color: rgb(176, 76, 240)}- E:last-of-type:匹配同類型中的最后一個同級元素E肛跌。
p:last-of-type{color: rgb(142, 65, 66)}- E:nth-of-type(n):匹配同類型中的第n個同級兄弟元素E艺配。
p:nth-of-type(2){color: rgb(142, 179, 13)}- E:nth-last-of-type(n):匹配同類型中的倒數(shù)第n個同級兄弟元素E。
p:nth-last-of-type(1){color: rgb(85, 20, 173)}- E:empty :匹配沒有任何子元素（包括text節(jié)點）的元素E衍慎。
div:empty{width: 300px;height: 300px;background: rgb(74, 210, 32)} -
偽類選擇器_UI偽類及其他選擇器
- E:active 向被激活的元素添加樣式转唉。
a:active{background: rgb(180, 131, 230)}- E:hover 當鼠標懸浮在元素上方時，向元素添加樣式稳捆。
a:hover{background: rgb(85, 246, 125)}- E:link 向未被訪問的鏈接添加樣式
a:link{color: rgb(187, 150, 150)}- E:visited 向已被訪問的鏈接添加樣式赠法。
a:visited{color: rgb(6, 245, 66)}- E:focus 向擁有鍵盤輸入焦點的元素添加樣式。
input:focus{background: rgb(161, 47, 231)}- E:lang向帶有指定 lang 屬性的元素添加樣式乔夯。
p:lang(en){background: red}- input:checked 選擇每個被選中的input元素砖织。
input:checked{width: 200px;height: 200px}- input:disabled 選擇每個禁用的input元素
input:disabled{width: 100px;height: 100px}- input:enabled 選擇每個啟用的input元素。
input:enabled{background: rgb(185, 52, 237)}末荐、 #E:target 選擇當前活動的元素(某個被鏈接的元素)侧纯。
:not(E) 選擇E元素之外的每個元素。
:not(input){color: yellow}
選擇器的優(yōu)先級問題
- 原則上：元素選擇器<類選擇器< ID選擇器<行內樣式
- 誰指向精確誰的優(yōu)先級高
- 并列的話誰在后邊誰優(yōu)先級高
