網(wǎng)絡(luò)技術(shù)網(wǎng)站seo在線培訓(xùn)課程
css選擇器、css的三大特性
文章目錄
- css選擇器、css的三大特性
- 一、css介紹
- 二、css選擇器
- 2.1 基本選擇器
- 2.2 組合選擇器
- 2.3 交集并集選擇器
- 2.4序列選擇器
- 2.5屬性選擇器
- 2.6偽類選擇器
- 2.7偽元素選擇器
- 三、css三大特性
- 3.1 繼承性
- 3.2 層疊性
- 3.3 優(yōu)先級(jí)
一、css介紹
CSS全稱為Cascading Style Sheet層疊樣式表，是專門用來為HTML標(biāo)簽添加樣式的。樣式指的是HTML標(biāo)簽的顯示效果，比如換行、寬高、顏色等等。
在沒有css以前html的樣式都需要在每個(gè)標(biāo)簽后面設(shè)置屬性，這樣非常的繁瑣，有了scc以后只需要完成統(tǒng)一的樣式設(shè)置就可以批量化的設(shè)置標(biāo)簽的樣式。
css引入有四種方式：
#內(nèi)行式
<p style="color:red">hello</p>#嵌入式
<head><style>p{color: red;}</style>
</head>
<body><p>hello</p>
</body>#導(dǎo)入式
#css文件中為p{color: red;}
<head><style>@import "css/mystyle.css";#或者@import url("css/mystyle.css");</style>
</head>
<body><p>hello</p>
</body>#外鏈?zhǔn)?/span>
#css文件中為p{color: red;}
<head><link rel="stylesheet" href="css/mystyle.css">
</head>
<body><p>hello</p>
</body>
導(dǎo)入式的方式存在一些問題：
- 導(dǎo)入式是css2.1特有的，對(duì)于不兼容css2.1的瀏覽器來說就是無效的
- 導(dǎo)入式會(huì)先加載頁(yè)面，再加載樣式，因此如果頁(yè)面內(nèi)容很大，可能會(huì)先出現(xiàn)無樣式的頁(yè)面，隔一段時(shí)間再出現(xiàn)完整的頁(yè)面從而降低用戶體驗(yàn)
在css中可以使用如下的方式進(jìn)行注釋：
/*這是注釋*/
二、css選擇器
選擇器的目的是通過某種方式選中標(biāo)簽從而完成對(duì)標(biāo)簽樣式的修改。
2.1 基本選擇器
id選擇器以#開頭，p1為標(biāo)簽的id名。但需要注意的是id名是唯一的，標(biāo)簽的id名不能重復(fù)，因此id資源十分珍貴，一般留給js代碼使用，css樣式不推薦使用。另外id名由字母、數(shù)字、部分特殊字符組成，且不能以數(shù)字開頭，更不能是html關(guān)鍵字如p，a，img。
<!--id選擇器-->
<style>#p1{color: red;}
</style>
類選擇器以.開頭，p1為標(biāo)簽的類名。類名的命名規(guī)則和id相同，一個(gè)標(biāo)簽可以有多個(gè)類，例如<p class=“p1 p2”></p>。
<!--類選擇器-->
<style>.p1{color: red;}
</style>
標(biāo)簽選擇器只需直接寫標(biāo)簽名即可。標(biāo)簽選擇器會(huì)選擇頁(yè)面所有相同類型的標(biāo)簽，但是只有html的標(biāo)簽才能作為標(biāo)簽選擇器。
<!--標(biāo)簽選擇器-->
<style>p{color: red;}
</style>
通配符選擇器可以選中頁(yè)面的所有標(biāo)簽，需要注意的是通配符選擇器使用時(shí)會(huì)遍歷頁(yè)面的所有標(biāo)簽，如果頁(yè)面內(nèi)容非常大，會(huì)導(dǎo)致效率降低的問題。
<!--通配符選擇器-->
<style>*{color: red;}
</style>
2.2 組合選擇器
后代選擇器以空格作為間隔，空格前后可以是基本選擇器的任意一種。后代選擇器可以選中某個(gè)標(biāo)簽的所有滿足要求的子標(biāo)簽，如下代碼中后代選擇器選中的是類為p1的標(biāo)簽中子標(biāo)簽為p并且子標(biāo)簽p中所有id為p2的子標(biāo)簽。
<!--后代選擇器-->
<style>.p1 p #p2{color: red;}
</style>
相鄰選擇器以+號(hào)作為間隔，+前后可以是基本選擇器的任意一種。相鄰選擇器的作用是選擇某個(gè)標(biāo)簽相鄰的下一個(gè)標(biāo)簽，如下代碼中相鄰選擇器選中的是類為p1的標(biāo)簽相鄰的下一個(gè)p標(biāo)簽。
<!--相鄰選擇器-->
<style>.p1+p{color: red;}
</style>
下級(jí)選擇器以>作為間隔，>前后可以是基本選擇器的任意一種。下級(jí)選擇器可以選中某個(gè)標(biāo)簽下一層嵌套中滿足要求的子標(biāo)簽，如下代碼中下級(jí)選擇器選中的是類為p1的標(biāo)簽中下一層嵌套中子標(biāo)簽為p并且子標(biāo)簽p中的下一層嵌套的所有id為p2的子標(biāo)簽。
<!--下級(jí)選擇器-->
<style>.p1>p>#p2{color: red;}
</style>
向后選擇器以作為間隔，前后可以是基本選擇器的任意一種。向后選擇器可以選中某標(biāo)簽后面所有滿足要求的標(biāo)簽。如下代碼中向后選擇器選中的是類為p1的標(biāo)簽后面所有的p標(biāo)簽。
<!--向后選擇器-->
<style>.p1~p{color: red;}
</style>
2.3 交集并集選擇器
交集并集選擇器前后同樣可以為基本選擇器的任意一種。
交集選擇器將多個(gè)基本選擇器連在一起寫(不過有標(biāo)簽選擇器的話，標(biāo)簽選擇器要寫在前面)，其功能是選中滿足多個(gè)條件的標(biāo)簽，如下代碼中交集選擇器選中的是標(biāo)簽為p且類為p1，p2的標(biāo)簽。
<!--交集選擇器-->
<style>p.p1.p2{color: red;}
</style>
并集選擇器將多個(gè)基本選擇器用,分隔寫在一塊，其功能是選中多個(gè)標(biāo)簽，如下代碼中并集選擇器選中的是所有p標(biāo)簽或者類為p1的標(biāo)簽或者類為p2的標(biāo)簽。
<!--并集選擇器-->
<style>p,.p1,.p2{color: red;}
</style>
2.4序列選擇器
序列選擇器可以加在任何基本選擇器后面作用是給基本選擇器一個(gè)篩選條件。
<!--選中所有層級(jí)中第一個(gè)且為p的標(biāo)簽-->
p:first-child
<!--選中所有層級(jí)中最后一個(gè)且為p的標(biāo)簽-->
p:last-child
<!--選中所有層級(jí)中正數(shù)第n個(gè)且為p的標(biāo)簽-->
p:nth-child(n)
<!--選中所有層級(jí)中倒數(shù)第n個(gè)且為p的標(biāo)簽-->
p:nth-last-child(n)
<!--選中所有層級(jí)中的第一個(gè)p標(biāo)簽-->
p:first-of-type
<!--選中所有層級(jí)中的最后一個(gè)p標(biāo)簽-->
p:last-of-type
<!--選中所有層級(jí)中正數(shù)第n個(gè)p標(biāo)簽-->
p:nth-of-type(n)
<!--選中所有層級(jí)中倒數(shù)第n個(gè)p標(biāo)簽-->
p:nth-last-of-type(n)
<!--選中所有層級(jí)中只有一個(gè)標(biāo)簽且為p-->
p:only-child
<!--選中所有層級(jí)中只有一個(gè)p標(biāo)簽-->
:only-of-type2.5屬性選擇器
屬性選擇器的地位相當(dāng)于基本選擇器，可以代替上面選擇器中需要使用基本選擇器的位置。
屬性選擇器會(huì)把屬性中的內(nèi)容作為字符串對(duì)其進(jìn)行匹配，=表示完全匹配，*表示含有，^表示以其開頭，$表示以其結(jié)尾。
<!--選中含有class屬性的標(biāo)簽-->
[class]
<!--選中class中完全匹配為p1的標(biāo)簽-->
[class="p1"]
<!--選中class中含有p1字符的標(biāo)簽-->
[class*="p1"]
<!--選中class中以p1字符開頭的標(biāo)簽-->
[class^="p1"]
<!--選中class中以p1字符結(jié)尾的標(biāo)簽-->
[class$="p1"]
<!--選中a標(biāo)簽且a標(biāo)簽中的href屬性以https字符開頭，這本質(zhì)是a的標(biāo)簽選擇器和屬性選擇器經(jīng)過交集選擇器拼接在了一起-->
a[href^="https"]
2.6偽類選擇器
<!--a標(biāo)簽初始狀態(tài)文字顏色為紅色-->
a:link{color: red;}
<!--a標(biāo)簽被訪問過后文字顏色為藍(lán)色-->
a:visited {color: blue;}
<!--鼠標(biāo)懸停a標(biāo)簽上時(shí)背景顏色為綠色-->
a:hover {background-color:green;}
<!--鼠標(biāo)點(diǎn)擊a標(biāo)簽時(shí)文字顏色為黃色-->
a:active {color: yellow;}
<!--input文本框聚集時(shí)框線消失，背景顏色為粉色-->
input:focus{outline: none;background-color:pink;}
a標(biāo)簽的偽類選擇器可以單獨(dú)出現(xiàn)，也可以一起出現(xiàn)，一起出現(xiàn)時(shí)有嚴(yán)格的順序要求：link，visited，hover，active。
hover是所有其他標(biāo)簽都可以使用的，focus只給input標(biāo)簽使用。
2.7偽元素選擇器
<!--選中p標(biāo)簽的首個(gè)字母，常用于雜志類文字首字母的調(diào)節(jié)大小-->
p:first-letter {font-size: 48px;}
<!--p標(biāo)簽內(nèi)容前面插入新內(nèi)容，且文本顏色為紅色-->
p:before {content: "*";color: red;}
<!--p標(biāo)簽內(nèi)容后面插入新內(nèi)容，且文本顏色為紅色-->
p:after {content: "?";color: red;}
選擇器的組合使用示例：p .p1:first-child~#qq:last-child,div+[class]:last-child p[class$=qq]
三、css三大特性
3.1 繼承性
繼承性指子標(biāo)簽可以繼承父標(biāo)簽的樣式，但是只有以color、font-、text-、line-開頭的屬性才可以繼承，a標(biāo)簽的文字顏色和下劃線是不能繼承別人的，h標(biāo)簽的文字大小是不能繼承別人的，如果繼承則會(huì)在原來字體大小的基礎(chǔ)上變大。
3.2 層疊性
層疊性是指如果多個(gè)選擇器選中了同一個(gè)標(biāo)簽且設(shè)置的屬性產(chǎn)生沖突時(shí)會(huì)有覆蓋效果。例如打開瀏覽器開發(fā)者面板時(shí)會(huì)看到有效屬性被劃掉了。
3.3 優(yōu)先級(jí)
當(dāng)多個(gè)選擇器選中同一標(biāo)簽且設(shè)置的屬性產(chǎn)生沖突時(shí)，就會(huì)涉及到優(yōu)先級(jí)的問題了。
優(yōu)先級(jí)遵守以下的規(guī)則：
- 行內(nèi)式>嵌入式和外部式(引入css文件的樣式)。
- 直接選中 > 間接選中(即繼承而來的)。
- 如果都是間接選中，那么誰離目標(biāo)標(biāo)簽比較近，就用誰的。
- 如果都是直接選中，并且都是同類型的選擇器，那么誰寫的在后面就用誰的。
- 如果都是直接選中，并且是不同類型的選擇器，那么id > 類 > 標(biāo)簽 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認(rèn)（即沒有設(shè)置任何屬性）。
- 如果都是直接選中，并且混雜了一系列其他的選擇器一起使用時(shí)，則需要通過計(jì)算機(jī)權(quán)重來判定優(yōu)先級(jí)：id數(shù)多的優(yōu)先級(jí)高；id數(shù)相同，則判定類數(shù)多的優(yōu)先級(jí)高；id數(shù)、class數(shù)均相同，則判定標(biāo)簽數(shù)多的優(yōu)先級(jí)高；若id數(shù)、class數(shù)、標(biāo)簽數(shù)均相同，則無需繼續(xù)往下計(jì)算了，誰寫在后面誰的優(yōu)先級(jí)高。
另外可以通過important將優(yōu)先級(jí)提升到最高，但是這種方法容易產(chǎn)生代碼難以維護(hù)的問題。
.p1{color:red !important;}