1.4.2.1簡(jiǎn)單選擇器
選擇器
h1{color: red;}
.m-nav{height: 70px;font-size: 14px;}
- 簡(jiǎn)單選擇器
- 偽元素選擇器
- 組合選擇器
標(biāo)簽選擇器
<div>
<p>段落一</p>
<p class="special">段落二</p>
<p class="special stress">段落三</p>
</div>
p{color: blue;}
.specisl{color: red;}
.stress{font-size: bold;}
類選擇器
.classname
-.
-字母，數(shù)字民镜，-踩叭，_
-className必須以字母開頭
-區(qū)分大小寫
-出現(xiàn)多次
id選擇器
<div id="banner">
banner
</div>
<div>
content
</div>
div{color: gray;}
#banner{color: black;}
- ＃id
-#
-字母锨苏，數(shù)字，-梳杏，_
-id必須以字母開頭
-區(qū)分大小寫
-只出現(xiàn)一次
通配符選擇器
*{color:blue;}
屬性選擇器-[att]
form action="">
<div>
<input disabled type="text" value="張三">
</div>
<div>
<inpt type="password" placeholder="密碼">
</div>
</form>
[disabled]{bsdkground-color:#ee;}
灰色背景運(yùn)用上去
屬性選擇器-[att=val]
<form action="">
<input type="text" value="文本框">
<input type="button" value="按鈕"
</form>
[type=button]{color:blue;}
屬性選擇器-[att~=val]
<h2 class="title sports"></h2>
<p class="sports">內(nèi)容…</p>
[class~=sports]{color:blue;}
屬性選擇器-[att|=val]
<p lang="en">hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="enfr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
[ang|=en]{color:red;}
屬性選擇器-[att^=val]
<div>
<a href="http:www.w3.org/">W3C</a>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
</div>
[href^="#"]{color:red}注意包含符號(hào)時(shí)用引號(hào)引起來
屬性選擇器-[att$=val]
<a >word文檔.doc</a>
<a >pdf文件.pdf</a>
[href$=pdf]{color:red;}以什么結(jié)尾
屬性選擇器-[att*=val]
<a >女星奧斯卡…</a>
<a >范瑋琪產(chǎn)后…</a>
<a >曝李楠有望…</a>
<a >皇馬1億…</a>
[href*="lady.163.com"]{color:pink;}href里包含……
偽類選擇器
<a >網(wǎng)易首頁(yè)</a>
a:link{color:gray;}
以冒號(hào)開頭韧拒，link表示連接淹接，選中頁(yè)面中所有的連接，使字體顏色變灰色叛溢。
href里有值的a標(biāo)簽
a:visited{color:red;}
訪問過以后變紅
a:hover{color:green}
鼠標(biāo)以上去顯示綠色
a:active{color:orange}
用戶鼠標(biāo)點(diǎn)擊上去的表示
link visited只用于連接屬性塑悼，剩下兩個(gè)都可以
定義四種狀態(tài)的屬性，書寫方式如上楷掉，link visited hover active
偽類選擇器
- :enabled
-input:enabled{color:#ccc}
元素可用的狀態(tài) - :disabled
-input:disabled{color:#ddd}
元素不可用狀態(tài) - :checdked
-input:checked{#red}
偽類選擇器
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
</ul>
li:frist-child{color:red}第一行變紅
li:last-child{color:red}最后一行變紅
li:nth-chid(even){color:red}偶數(shù)項(xiàng)變紅
li:nth-chid(3n+1){color:red}第一行厢蒜，第四行變紅
li:nth-last-chid(3n+1){color:red}第三行，第六行變紅
<ul>
<li>一</li>
</ul>
<ul>
<li>一</li>
<li>二</li>
</ul>
兩個(gè)列表烹植，第一個(gè)有一個(gè)元素斑鸦，，第二個(gè)有兩個(gè)元素
假設(shè)選中只有一個(gè)元素的第一個(gè)列表
:only-child{color:red;}
<dl>
<dt>作者：</dt>
<dd>Dave Shea</dd>
<dd>Molly E.Holzschlag</dd>
<dt>出版社：</dt>
<dd>人民郵電出版社</dd>
</dl>
使第一個(gè)dd標(biāo)簽的內(nèi)容變?yōu)榧t色
dd:first-of-type{color:red}
使最后一個(gè)dt標(biāo)簽內(nèi)容變?yōu)榧t色
dt:last-of-type{color:red}
第偶數(shù)個(gè)dd元素為紅色
dd:nth-of-type(even){color:red}
倒數(shù)偶數(shù)項(xiàng)dt
dt:nth-last-of-type(2n){color:red}
<p><span>CSS</span>和<span>HTML</span>是頁(yè)面制作的基礎(chǔ)草雕。</p>
<p><span>CSS</span>主要是用于定義<em>HTML</em>內(nèi)容在瀏覽器內(nèi)的顯示樣式</p>
選中只用某一種類型的元素巷屿，選中第二段里的CSS元素，改變他的樣式
span:only-of-type{color:red;}
不能用 only-of-child因?yàn)閟pan元素不是p唯一的屬性墩虹，它還有em屬性
不常用的選擇器
- :empty
<p></p>選中頁(yè)面中沒有子元素的元素 - :root
選中html根標(biāo)簽 - :not()
- :target
- :lang()
簡(jiǎn)單選擇器
- tag{} 標(biāo)簽選擇器
- .className{} 類選擇器
- ＃id{} id選擇器
- *{} 通配符選擇器
- [att]{} 屬性選擇器
- :link{} 偽類選擇器
簡(jiǎn)單選擇器可以組合
img[src$=jpg]{}
也是簡(jiǎn)單選擇器嘱巾，img標(biāo)簽src值是以jpg結(jié)尾的
banner:hover{}
選中id為banner元素的hover狀態(tài)
1.4.2.2其他選擇器
偽元素選擇器
- 段落第一個(gè)字母變紅
::first-letter{color:red;}
-兩個(gè)冒號(hào)，區(qū)別于偽類選擇器 - 選中第一行變?yōu)榧t色
::first-line{color:red;} - 給內(nèi)容的前面和后面加一些輔助的內(nèi)容
::before{content:"before"}
::after{content:"after;}
與content屬性一起用诫钓。 - 選中被用戶選中內(nèi)容的樣式
::selection{
color:red;
background-color:#ccc;
}
當(dāng)我們選中文字時(shí)旬昭，字體變?yōu)榧t色，背景變?yōu)榛疑?/p>
組合選擇器
- 后代選擇器
- 子選擇器
- 兄弟選擇器
<div class="main">
<h2>標(biāo)題一</h2>
<div>
<h2>標(biāo)題二</h2>
<p>段落一</p>
</div>
</div>
.main h2{color:red;}
兩個(gè)h2都為紅色
子選擇器
.main>h2{color:red;}
將中間的空格替換為大于號(hào)菌湃，第一個(gè)h2標(biāo)題變紅
<div>
<h2>標(biāo)題</h2>
<p>段落一</p>
<p>段落二</p>
</div>
兄弟選擇器
h2+p{color:red;}
p標(biāo)簽直接的前面是h2问拘，這樣選中的是段落一，不會(huì)選中段落二
h2~p{color:red;}
選中的是兩個(gè)p標(biāo)簽慢味，即段落一與二场梆，表示p標(biāo)簽前面有一個(gè)h2不用近鄰
選擇器分組
h1{color: gray;font-family: sans-serif;}
h2{color: gray;font-family: sans-serif;}
h3{color: gray;font-family: sans-serif;}
以上可以簡(jiǎn)化為
h1,h2,h3,{color: gray;font-family: sans-serif;}
之間用逗號(hào)隔開，將統(tǒng)一的樣式寫下
1.4.2.3繼承纯路，優(yōu)先級(jí)，層疊
使頁(yè)面中所有的字體為微軟雅黑寞忿？
…
<body>
<div>頁(yè)面頭部</div>
<div>
<h2>標(biāo)題</h2>
<p>內(nèi)容</p>
…
</div>
<div>頁(yè)面尾部</div>
</body>
…
body{font-family:"Microsoft Yahei";}
繼承
- -color
- -font
- -text-align
- -list-style
- …
<div>
<h2>標(biāo)題一</h2>
<p>段落一</p>
</div>
div{color:red;}
div 里所有屬性變?yōu)榧t色
非繼承屬性
- -background
- -border
- -position
- …
同樣上例中驰唬，給div一個(gè)border屬性，border屬性不會(huì)被自動(dòng)繼承
div{border:1px solid #ccc;}
文檔上描述屬性詳情的時(shí)候腔彰，有inherited表示屬性是否可以繼承叫编。
CSS優(yōu)先級(jí)
- 計(jì)算方法
-a 行內(nèi)樣式
-b ID選擇器的數(shù)量
-c 類，偽類和屬性選擇器的數(shù)量
-d 標(biāo)簽選擇器和偽元素選擇器的數(shù)量
權(quán)重
value=a1000+b100+c*10+d
h1=1
p>em=2
style:""=1000
.comment p=11
div#content=101
a:link=11
優(yōu)先級(jí)高的樣式霹抛，覆蓋優(yōu)先級(jí)低的樣式
CSS層疊
- 相同的屬性會(huì)覆蓋
-優(yōu)先級(jí)高覆蓋低
-后面覆蓋前面 - 不同的屬性會(huì)合并
<div>
<p class="special">css層疊…</p>
</div>
p{
color: blue;
text-align: left ;
font-weight: bold;
}
p.special{
color: red;
text-align: right;
}
p:first-child{color:green;}
最后字體為：綠色搓逾，有對(duì)齊，加粗
CSS改變優(yōu)先級(jí)
- 改變先后順序
- 提升選擇器優(yōu)先級(jí)
- ! important
改變先后順序
改變位置杯拐，上下選擇器互換位置
提升選擇器的優(yōu)先級(jí)
例如加一個(gè)標(biāo)簽選擇器
! important
.tip{
color: blue !important;
}
p.special{
color: red;
}
!important是在前面兩種方法都不可行的情況下使用的霞篡。
