序選擇器
CSS3 中新增的選擇器最具代表性的就是序選擇器
同級(jí)別序選擇器
:first-child
選中同級(jí)別中的第一個(gè)標(biāo)簽:last-child
選中同級(jí)別中的最后一個(gè)標(biāo)簽:nth-child(n)
選中同級(jí)別中的第 n 個(gè)標(biāo)簽:nth-last-child(n)
選中同級(jí)別中的倒數(shù)第 n 個(gè)標(biāo)簽:only-child
選中父元素中唯一的標(biāo)簽
注意點(diǎn)：不區(qū)分類(lèi)別同類(lèi)別的序選擇器
:first-of-type
選中同級(jí)別中同類(lèi)型的第一個(gè)標(biāo)簽:last-of-type
選中同級(jí)別中同類(lèi)型的最后一個(gè)標(biāo)簽:nth-of-type(n)
選中同級(jí)別中同類(lèi)型的第 n 個(gè)標(biāo)簽:nth-last-of-type(n)
選中同級(jí)別中同類(lèi)型的倒數(shù)第 n 個(gè)標(biāo)簽:only-of-type
選中父元素中唯一類(lèi)型的某個(gè)標(biāo)簽
p:first-child{
color: red;
}
p:first-of-type{
color: blue;
}
p:last-child{
color: red;
}
p:last-of-type{
color: blue;
}
p:nth-child(3){
color: red;
}
p:nth-of-type(3){
color: blue;
}
p:nth-last-child(2){
color: red;
}
p:nth-last-of-type(2){
color: red;
}
p:only-child{
color: purple;
}
p:only-of-type {
color: red;
}
.para:only-of-type {
color: red;
}
<body>
<h1>我是標(biāo)題</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p class="para">我是段落1</p>
<div>
<p class="para">我是段落2</p>
<p class="para">我是段落2</p>
<h1>我是標(biāo)題</h1>
</div>
</body>
- :nth-child(odd)
選中同級(jí)別中的所有奇數(shù) - :nth-child(evem)
選中同級(jí)別中的所有偶數(shù) - :nth-child(xn+y)
x 和 y 是用戶(hù)自定義的厂抽，n是一個(gè)計(jì)數(shù)器，從0開(kāi)始
屬性選擇器
- 什么是屬性選擇器
- 格式：
[attribute] - 作用：根據(jù)指定的屬性名稱(chēng)找到對(duì)應(yīng)的標(biāo)簽，然后設(shè)置屬性
- 格式：
[attribute=value] - 作用：找到有指定屬性衔掸，并且屬性的取值等于 value 的標(biāo)簽，然后設(shè)置屬性
- 最常見(jiàn)的應(yīng)用場(chǎng)景就是用戶(hù)區(qū)分 Input 屬性
<head>
<style>
input[type=password]{}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
</body>
屬性的取值是以什么開(kāi)頭的
[attribute|=value] CSS2
[attribute^=value] CSS3
兩者之間的區(qū)別：CSS2 中的只能找到 value 開(kāi)頭昨寞，并且 value 是被 - 和其他內(nèi)容隔開(kāi)的棵帽。CSS3 中的只要是以 value 開(kāi)頭的都可以找到屬性的取值是以什么結(jié)尾的
[attribute$=value] CSS3
屬性的取值是否包含某個(gè)特定的值的
[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區(qū)別：CSS2 中的只能找到獨(dú)立的單詞，也就是包含 value毕莱， 并且 value 是被空格隔開(kāi)的。 CSS3 中的只要包含 value 就可以找到
img[alt^=abc]{
color: red;
}
img[alt|=abc]{
color: red;
}
img[alt$=abc]{
color: blue;
}
img[alt*=abc]{
color: red;
}
img[alt~=abc]{
color: red;
}
通配符選擇器
- 什么是通配符選擇器
- 作用：給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性
- 格式：
*{屬性:值颅夺；} - 注意點(diǎn)：由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性朋截，所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽，如果當(dāng)前界面上的標(biāo)簽比較多吧黄，那么性能就會(huì)比較差部服。所以在企業(yè)開(kāi)發(fā)中一般不會(huì)使用通配符選擇器
*{
color: red;
}
CSS 三大特性之繼承性
什么是繼承性
作用：給父元素設(shè)置一些屬性，子元素也可以使用拗慨，這個(gè)我們就稱(chēng)之為繼承性
注意點(diǎn)
并不是所有的屬性都可以繼承廓八，只有以 color/font-/text-/line- 開(kāi)頭的屬性才可以繼承
在 CSS 的繼承中不僅僅是兒子可以繼承，只要是后代都可以繼承
繼承性中的特殊性
1.a 標(biāo)簽的文字顏色和下劃線是不能繼承的
2.h 標(biāo)簽的文字大小是不能繼承的應(yīng)用場(chǎng)景
一般用于設(shè)置網(wǎng)頁(yè)上的一些共性信息赵抢，例如網(wǎng)頁(yè)的文字顏色剧蹂，字體，文字大小等內(nèi)容
<head>
<style>
body{}
</style>
</head>
<body>
<div>
<p>我是段落</p>
</div>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<div>
<a href="#">我是超鏈接</a>
</div>
</body>
CSS 三大特性之層疊性
- 什么是層疊性
- 作用：層疊性就是 CSS 處理沖突的一種能力
注意點(diǎn)：
層疊形只有在多個(gè)選擇器選中同一個(gè)標(biāo)簽烦却，然后又設(shè)置了相同的屬性宠叼，才會(huì)發(fā)生層疊性
CSS 全程 Cascading StyleSheet
<head>
<style>
p{
color: red;
}
.para{
color: blue;
}
</style>
</head>
<body>
<p id="identity" class="para">我是段落</p>
</body>
CSS 三大特性之優(yōu)先級(jí)
什么是優(yōu)先級(jí)
作用：當(dāng)多個(gè)選擇器選中同一個(gè)標(biāo)簽，并且給同一個(gè)標(biāo)簽設(shè)置相同的屬性時(shí)其爵，如何層疊就由優(yōu)先級(jí)來(lái)確定
優(yōu)先級(jí)判斷的三種方式
間接選中就是指繼承车吹，如果是間接選中筹裕，那么就是誰(shuí)離目標(biāo)標(biāo)簽比較近就聽(tīng)誰(shuí)的
相同選擇器（直接選中），如果都是直接選中窄驹，并且都是同類(lèi)型的選擇器朝卒，那么就是誰(shuí)寫(xiě)在后面聽(tīng)誰(shuí)的
不同選擇器（直接選中），如果都是直接選中乐埠，并且不是相同類(lèi)型的選擇器抗斤，那么就會(huì)按照選擇器的優(yōu)先級(jí)來(lái)層疊
id>類(lèi)>標(biāo)簽>通配符>繼承>瀏覽器默認(rèn)
！important
- 什么是 丈咐！important
- 作用：用于提升某個(gè)直接選中標(biāo)簽的選擇器中的某個(gè)屬性的優(yōu)先級(jí)的瑞眼，可以將被指定的屬性的優(yōu)先級(jí)提升為最高
注意點(diǎn)：
- ！important 只能用于直接選中棵逊，不能用于間接選中
- 通配符選擇器選中的標(biāo)簽也是直接選中的
- 伤疙！important 只能提升被指定的屬性的優(yōu)先級(jí)，其他的屬性的優(yōu)先級(jí)不會(huì)被提升
- 辆影！important 必須寫(xiě)在屬性值的分號(hào)前面
- 徒像！important 前面的感嘆號(hào)不能省略
優(yōu)先級(jí)之權(quán)重問(wèn)題
什么是優(yōu)先級(jí)的權(quán)重
作用：當(dāng)多個(gè)選擇器混合在一起使用時(shí)，我們可以通過(guò)計(jì)算權(quán)重來(lái)判斷誰(shuí)的優(yōu)先級(jí)最高
權(quán)重的計(jì)算規(guī)則
首先先計(jì)算選擇器中有多少個(gè) id蛙讥， id 多的選擇器優(yōu)先級(jí)最高
如果 id 的個(gè)數(shù)一樣锯蛀，那么再看類(lèi)名的個(gè)數(shù)，類(lèi)名個(gè)數(shù)多的優(yōu)先級(jí)最高
如果類(lèi)名的個(gè)數(shù)一樣次慢，那么再看標(biāo)簽名稱(chēng)的個(gè)數(shù)旁涤，標(biāo)簽名稱(chēng)個(gè)數(shù)多的優(yōu)先級(jí)最高
如果id 個(gè)數(shù)一樣，類(lèi)名個(gè)數(shù)也一樣迫像，標(biāo)簽名稱(chēng)個(gè)數(shù)也一樣劈愚，那么就不會(huì)繼續(xù)往下計(jì)算了，此時(shí)誰(shuí)寫(xiě)在最后面聽(tīng)誰(shuí)的
注意點(diǎn)：
只有選擇器時(shí)直接選中標(biāo)簽的才需要計(jì)算權(quán)重闻妓，否則一定會(huì)聽(tīng)直接選中的選擇器的
div 和 span 標(biāo)簽
什么是 div
作用：一般用于配合 css 完成網(wǎng)頁(yè)的基本布局什么是 span
作用：一般用于配合 css 修改網(wǎng)頁(yè)中的一些局部信息div 和 span 有什么區(qū)別
div 會(huì)單獨(dú)的占領(lǐng)一行造虎，而 span 不會(huì)單獨(dú)占領(lǐng)一行
div 是一個(gè)容器級(jí)的標(biāo)簽，而 span 是一個(gè)文本級(jí)的標(biāo)簽
容器級(jí)的標(biāo)簽和文本級(jí)的標(biāo)簽的區(qū)別
容器級(jí)的標(biāo)簽中可以嵌套其它所有的標(biāo)簽纷闺，文本級(jí)的標(biāo)簽中只能嵌套文字/圖片/超鏈接
容器級(jí)標(biāo)簽：
div h ul ol dl li dt dd ...
文本級(jí)的標(biāo)簽 ：
span p buis strong em ins del ...
注意點(diǎn)：
哪些標(biāo)簽是文本級(jí)的哪些標(biāo)簽是容器級(jí)的，我們不用刻意去記憶份蝴，在企業(yè)開(kāi)發(fā)中一般情況下要嵌套都是嵌套在 div 中犁功， 或者 按照組標(biāo)簽來(lái)嵌套
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
<p>努力到<span>無(wú)能為力</span>, 拼搏到<span>感動(dòng)自己</span></p>
CSS 元素的顯示模式
在 html 中 html 將所有的標(biāo)簽分為兩類(lèi)，分表是容器級(jí)和文本級(jí)
在 CSS 中 CSS 也將所有的標(biāo)簽分為兩類(lèi)婚夫，分別是塊級(jí)元素和行內(nèi)元素
- 什么是塊級(jí)元素什么是行內(nèi)元素
塊級(jí)元素會(huì)獨(dú)占一行
行內(nèi)元素不會(huì)獨(dú)占一行
容器級(jí)標(biāo)簽
div h ul ol dl lo dt dd ...
文本級(jí)標(biāo)簽
span p buis strong em ins del ...
塊級(jí)元素
p div h ul ol dl li dt dd
行內(nèi)元素
span buis strong em ins del
塊級(jí)元素和行內(nèi)元素的區(qū)別
塊級(jí)元素獨(dú)占一行如果沒(méi)有設(shè)置寬度那么默認(rèn)和父元素一樣寬浸卦，如果設(shè)置了寬高，那么按照設(shè)置的來(lái)顯示
行內(nèi)元素不會(huì)獨(dú)占一行案糙，如果沒(méi)有設(shè)置寬度限嫌，那么默認(rèn)和內(nèi)容一樣寬靴庆，行內(nèi)元素是不可以設(shè)置寬度和高度的
行內(nèi)塊元素，為了能夠讓元素既能夠不獨(dú)占一行怒医，又可以設(shè)置寬度和高度炉抒，那么就出現(xiàn)了行內(nèi)塊元素
<style>
div{
background: red;
width: 200px;
height: 200px;
}
span{
background: blue;
width: 200px;
height: 200px;
}
img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是段落</p>
<h1>我是標(biāo)題</h1>
<hr>
<span>我是span</span>
<b>我是加粗</b>
<strong>我是強(qiáng)調(diào)</strong>
<hr>
</body>
CSS 元素顯示模式轉(zhuǎn)換
- 如何轉(zhuǎn)換 CSS 元素的顯示模式
設(shè)置元素的 display 屬性 - display 取值
- block 塊級(jí)
- inline 行內(nèi)
- inline-block 行內(nèi)塊級(jí)
- 快捷鍵
di display:inline;
db display:block;
dib display:inline-block;
<style>
div{
display: inline;
background: red;
width: 200px;
height: 200px;
}
span{
display: block;
background: green;
width: 200px;
height: 200px;
}
.cc{
background: blue;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
