選擇器：
- 標(biāo)簽選擇器
格式：
標(biāo)簽名稱{
屬性:值;
} - id選擇器
格式:
id名稱{
屬性:值;
}
類選擇器
格式:
.類名{
屬性:值;
}后代選擇器
格式:
標(biāo)簽名稱1 標(biāo)簽名稱2{
屬性:值;
}子元素選擇器
格式:
標(biāo)簽名稱1>標(biāo)簽名稱2{
屬性:值;
}交集選擇器
格式:
選擇器1選擇器2{
屬性: 值;
}并集選擇器
格式:
選擇器1,選擇器2{
屬性:值;
}兄弟選擇器
格式:
選擇器1+選擇器2{
屬性:值;
}序選擇器
.para:only-of-type {
color: red;
}屬性選擇器
格式:
[attribute]
作用:根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性通配符選擇器
格式:
*{
屬性:值;
}
1 標(biāo)簽選擇器
1.什么是標(biāo)簽選擇器?
作用: 根據(jù)指定的標(biāo)簽名稱, 在當(dāng)前界面中找到所有該名稱的標(biāo)簽, 然后設(shè)置屬性
格式:
標(biāo)簽名稱{
屬性:值;
}
注意點(diǎn):
1.標(biāo)簽選擇器選中的是當(dāng)前界面中所有的標(biāo)簽, 而不能單獨(dú)選中某一個(gè)標(biāo)簽
2.標(biāo)簽選擇器無論標(biāo)簽藏得多深都能選中
3.只要是HTML中的標(biāo)簽就可以作為標(biāo)簽選擇器(h/a/img/ul/ol/dl/input....)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04--標(biāo)簽選擇器</title>
<style>
p{
font-size: 30px;
color:red;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<ul>
<li>
<p>我是一個(gè)段落</p>
</li>
</ul>
</li>
</ul>
</body>
</html>
2 id選擇器
1.什么是id選擇器?
作用: 根據(jù)指定的id名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
格式:
id名稱{
屬性:值;
}
注意點(diǎn):
1.每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做id, 也就是說每個(gè)標(biāo)簽都可以設(shè)置id
2.在同一個(gè)界面中id的名稱是不可以重復(fù)的
3.在編寫id選擇器時(shí)一定要在id名稱前面加上#
4.id的名稱是有一定的規(guī)范的
4.1id的名稱只能由字母/數(shù)字/下劃線
a-z 0-9 _
4.2id名稱不能以數(shù)字開頭
4.3id名稱不能是HTML標(biāo)簽的名稱
不能是a h1 img input ...
5.在企業(yè)開發(fā)中一般情況下如果僅僅是為了設(shè)置樣式, 我們不會(huì)使用id ,因?yàn)樵谇岸碎_發(fā)中id是留給js使用的
新建一個(gè)帶id的標(biāo)簽的快捷：p#ss+table鍵坏瞄，其中ss就是id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-id選擇器</title>
<style>
#identity1{
color: red;
}
#identity2{
color: green;
}
#identity3{
color: blue;
}
#identity4{
color: yellow;
}
</style>
</head>
<body>
<p id="identity1">遲到毀一生</p>
<p id="identity2">早退窮三代</p>
<p id="identity3">按時(shí)上下班</p>
<p id="identity4">必成高富帥</p>
</body>
</html>
3類選擇器
1.什么是類選擇器?
作用: 根據(jù)指定的類名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
格式:
.類名{
屬性:值;
}
注意點(diǎn):
1.每個(gè)HTML標(biāo)簽都有一個(gè)屬性叫做class, 也就是說每個(gè)標(biāo)簽都可以設(shè)置類名
2.在同一個(gè)界面中class的名稱是可以重復(fù)的
3.在編寫class選擇器時(shí)一定要在class名稱前面加上.
4.類名的命名規(guī)范和id名稱的命名規(guī)范一樣
5.類名就是專門用來給CSS設(shè)置樣式的
6.在HTML中每個(gè)標(biāo)簽可以同時(shí)綁定多個(gè)類名
格式:
<標(biāo)簽名稱 class="類名1 類名2 ...">
錯(cuò)誤的寫法:
<p class="para1" class="para2">
新建一個(gè)帶class屬性的標(biāo)簽的快捷鍵：p.ss+table鍵乃秀，其中ss是class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-類選擇器</title>
<style>
.pp{
color: red;
}
.ppp{
color: green;
}
.pppp{
color: blue;
}
.ppppp{
color: yellow;
}
.para1{
font-size: 100px;
}
.para2{
font-style: italic;
}
</style>
</head>
<body>
<p class="pp">遲到毀一生</p>
<p class="ppp">早退窮三代</p>
<p class="pppp">按時(shí)上下班</p>
<p class="ppppp">必成高富帥</p>
<p class="para1 para2">我是段落</p>
<p class="para1 para2">我是段落</p>
</body>
</html>
1.id和class的區(qū)別?
1.1
id相當(dāng)于人的身份證不可以重復(fù)
class相當(dāng)于人的名稱可以重復(fù)
1.2
一個(gè)HTML標(biāo)簽只能綁定一個(gè)id名稱
一個(gè)HTML標(biāo)簽可以綁定多個(gè)class名稱
2.id選擇器和class選擇器區(qū)別?
id選擇器是以#開頭
class選擇器是以.開頭
3.在企業(yè)開發(fā)中到底用id選擇器還是用class選擇器?
id一般情況下是給js使用的, 所以除非特殊情況, 否則不要使用id去設(shè)置樣式
4.在企業(yè)開發(fā)中一個(gè)開發(fā)人員對(duì)類的使用可以看出這個(gè)開發(fā)人員的技術(shù)水平
一般情況下在企業(yè)開發(fā)中要注重冗余代碼的抽取, 可以將一些公共的代碼抽取到一個(gè)類選擇器中, 然后讓標(biāo)簽和這個(gè)類選擇器綁定即可
3 后代選擇器
1.什么是后代選擇器?
作用: 找到指定標(biāo)簽的所有特定的后代標(biāo)簽, 設(shè)置屬性
格式:
標(biāo)簽名稱1 標(biāo)簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后再在這個(gè)標(biāo)簽下面去查找所有名稱叫做"標(biāo)簽名稱2"的標(biāo)簽, 然后在設(shè)置屬性
div p{}
注意點(diǎn):
1.后代選擇器必須用空格隔開
2.后代不僅僅是兒子, 也包括孫子/重孫子, 只要最終是放到指定標(biāo)簽中的都是后代
3.后代選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用其它選擇器
4.后代選擇器可以通過空格一直延續(xù)下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12-后代選擇器</title>
<style>
div ul li p{
color: red;
}
</style>
</head>
<body>
<!--div ul li p-->
<p>我是段落</p>
<div id="identity" class="para">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li>
<!--<p id="iii" class="ccc">我是段落</p>-->
<p>我是段落</p>
</li>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>
4子元素選擇器
1.什么是子元素選擇器?
作用: 找到指定標(biāo)簽中所有特定的直接子元素, 然后設(shè)置屬性
格式:
標(biāo)簽名稱1>標(biāo)簽名稱2{
屬性:值;
}
先找到所有名稱叫做"標(biāo)簽名稱1"的標(biāo)簽, 然后在這個(gè)標(biāo)簽中查找所有直接子元素名稱叫做"標(biāo)簽名稱2"的元素
注意點(diǎn):
1.子元素選擇器只會(huì)查找兒子, 不會(huì)查找其他被嵌套的標(biāo)簽
2.子元素選擇器之間需要用>符號(hào)連接, 并且不能有空格
3.子元素選擇器不僅僅可以使用標(biāo)簽名稱, 還可以使用其它選擇器
4.子元素選擇器可以通過>符號(hào)一直延續(xù)下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13-子元素選擇器</title>
<style>
/*
div>p{
color: red;
}
*/
/*
#identity>p{
color: blue;
}
*/
div>ul>li>p{
color: purple;
}
</style>
</head>
<body>
<!--div>ul>li>p-->
<p>我是段落</p>
<div id="identity">
<p>我是段落</p>
<p>我是段落</p>
<ul>
<li><p>我是段落</p></li>
</ul>
</div>
<p>我是段落</p>
</body>
</html>
1.后代選擇器和子元素選擇器之間的區(qū)別?
1.1
后代選擇器使用空格作為連接符號(hào)
子元素選擇器使用>作為連接符號(hào)
1.2
后代選擇器會(huì)選中指定標(biāo)簽中, 所有的特定后代標(biāo)簽, 也就是會(huì)選中兒子/孫子..., 只要是被放到指定標(biāo)簽中的特定標(biāo)簽都會(huì)被選中
子元素選擇器只會(huì)選中指定標(biāo)簽中, 所有的特定的直接標(biāo)簽, 也就是只會(huì)選中特定的兒子標(biāo)簽
2.后代選擇器和子元素選擇器之間的共同點(diǎn)
2.1
后代選擇器和子元素選擇器都可以使用標(biāo)簽名稱/id名稱/class名稱來作為選擇器
2.2
后代選擇器和子元素選擇器都可以通過各自的連接符號(hào)一直延續(xù)下去
選擇器1>選擇器2>選擇器3>選擇器4{}
3.在企業(yè)開發(fā)中如何選擇
如果想選中指定標(biāo)簽中的所有特定的標(biāo)簽, 那么就使用后代選擇器
如果只想選中指定標(biāo)簽中的所有特定兒子標(biāo)簽, 那么就使用子元素選擇器
5 交集選擇器
1.什么是交集選擇器?
作用: 給所有選擇器選中的標(biāo)簽中, 相交的那部分標(biāo)簽設(shè)置屬性
格式:
選擇器1選擇器2{
屬性: 值;
}
注意點(diǎn):
1.選擇器和選擇器之間沒有任何的連接符號(hào)
2.選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
3.交集選擇器僅僅作為了解, 企業(yè)開發(fā)中用的并不多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15-交集選擇器</title>
<style>
/*
p.para1{
color: red;
}
*/
.para1#identity{
color: blue;
}
</style>
</head>
<body>
<p>我是段落</p>
<p>我是段落</p>
<p class="para1" id="identity">我是段落</p>
<p class="para1">我是段落</p>
<p>我是段落</p>
</body>
</html>
6.并集選擇器
1.什么是并集選擇器?
作用: 給所有選擇器選中的標(biāo)簽設(shè)置屬性
格式:
選擇器1,選擇器2{
屬性:值;
}
注意點(diǎn):
1.并集選擇器必須使用,來連接
2.選擇器可以使用標(biāo)簽名稱/id名稱/class名稱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16-并集選擇器</title>
<style>
/*
.ht{
color: red;
}
.para{
color: red;
}
*/
.ht,.para{
color: red;
}
</style>
</head>
<body>
<h1 class="ht">我是標(biāo)題</h1>
<p class="para">我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
7兄弟選擇器
1.相鄰兄弟選擇器 CSS2
作用: 給指定選擇器后面緊跟的那個(gè)選擇器選中的標(biāo)簽設(shè)置屬性
格式:
選擇器1+選擇器2{
屬性:值;
}
注意點(diǎn):
1.相鄰兄弟選擇器必須通過+連接
2.相鄰兄弟選擇器只能選中緊跟其后的那個(gè)標(biāo)簽, 不能選中被隔開的標(biāo)簽
2.通用兄弟選擇器 CSS3
作用: 給指定選擇器后面的所有選擇器選中的所有標(biāo)簽設(shè)置屬性
格式:
選擇器1~選擇器2{
屬性:值;
}
注意點(diǎn):
1.通用兄弟選擇器必須用~連接
2.通用兄弟選擇器選中的是指定選擇器后面某個(gè)選擇器選中的所有標(biāo)簽, 無論有沒有被隔開都可以選中
8序選擇器
CSS3中新增的選擇器最具代表性的就是序選擇器
1.同級(jí)別的第幾個(gè)
: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ū)分類型
2.同類型的第幾個(gè)
:first-of-type 選中同級(jí)別中同類型的第一個(gè)標(biāo)簽
:last-of-type 選中同級(jí)別中同類型的最后一個(gè)標(biāo)簽
:nth-of-type(n) 選中同級(jí)別中同類型的第n個(gè)標(biāo)簽
:nth-last-of-type(n) 選中同級(jí)別中同類型的倒數(shù)第n個(gè)標(biāo)簽
:only-of-type 選中父元素中唯一類型的某個(gè)標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>18-序選擇器</title>
<style>
/*
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;
}
</style>
</head>
<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>
</html>
:nth-child(odd) 選中同級(jí)別中的所有奇數(shù)
:nth-child(even) 選中同級(jí)別中的所有偶數(shù)
:nth-child(xn+y)
x和y是用戶自定義的, 而n是一個(gè)計(jì)數(shù)器, 從0開始遞增
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>19-序選擇器下</title>
<style>
/*
p:nth-child(odd){
color: red;
}
p:nth-child(even){
color: blue;
}
*/
/*
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: blue;
}
*/
/*
p:nth-child(2n+0){
color: red;
}
p:nth-child(2n+1){
color: blue;
}
*/
p:nth-child(3n+0){
color: red;
}
</style>
</head>
<body>
<!--
:nth-child(odd) 選中同級(jí)別中的所有奇數(shù)
:nth-child(even) 選中同級(jí)別中的所有偶數(shù)
:nth-child(xn+y)
x和y是用戶自定義的, 而n是一個(gè)計(jì)數(shù)器, 從0開始遞增
-->
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
<p>我是項(xiàng)目</p>
</body>
</html>
9:屬性選擇器
1.什么是屬性選擇器?
作用: 根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
格式:
[attribute]
作用:根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
[attribute=value]
作用: 找到有指定屬性, 并且屬性的取值等于value的標(biāo)簽, 然后設(shè)置屬性
最常見的應(yīng)用場景, 就是用于區(qū)分input屬性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20-屬性選擇器上</title>
<style>
/*
p[id]{
color: red;
}
*/
p[class=cc]{
color: blue;
}
</style>
</head>
<body>
<!--
1.什么是屬性選擇器?
作用: 根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
格式:
[attribute]
作用:根據(jù)指定的屬性名稱找到對(duì)應(yīng)的標(biāo)簽, 然后設(shè)置屬性
[attribute=value]
作用: 找到有指定屬性, 并且屬性的取值等于value的標(biāo)簽, 然后設(shè)置屬性
最常見的應(yīng)用場景, 就是用于區(qū)分input屬性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
-->
<p id="identity1">我是段落1</p>
<p id="identity2" class="cc">我是段落2</p>
<p class="cc">我是段落3</p>
<p id="identity3" class="para">我是段落4</p>
<p>我是段落5</p>
</body>
</html>
補(bǔ)充
1.屬性的取值是以什么開頭的
[attribute|=value] CSS2
[attribute^=value] CSS3
兩者之間的區(qū)別:
CSS2中的只能找到value開頭,并且value是被-和其它內(nèi)容隔開的
CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開
2.屬性的取值是以什么結(jié)尾的
[attribute$=value] CSS3
3.屬性的取值是否包含某個(gè)特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區(qū)別:
CSS2中的只能找到獨(dú)立的單詞, 也就是包含value,并且value是被空格隔開的
CSS3中的只要包含value就可以找到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21-屬性選擇器下</title>
<style>
/*
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;
}
</style>
</head>
<body>
<!--
<img src="" alt="abcdef">
<img src="" alt="abc-www">
<img src="" alt="abc ppp">
<img src="" alt="defabc">
<img src="" alt="ppp abc">
<img src="" alt="www-abc">
<img src="" alt="qq">
<img src="" alt="yy">
-->
<img src="" alt="abcwwwmmm">
<img src="" alt="wwwmmmabc">
<img src="" alt="wwwabcmmm">
<img src="" alt="www-abc-mmm">
<img src="" alt="www abc mmm">
<img src="" alt="qq">
</body>
</html>
10通配符選擇器
1.什么是通配符選擇器?
作用: 給當(dāng)前界面上所有的標(biāo)簽設(shè)置屬性
格式:
*{
屬性:值;
}
注意點(diǎn):
由于通配符選擇器是設(shè)置界面上所有的標(biāo)簽的屬性, 所以在設(shè)置之前會(huì)遍歷所有的標(biāo)簽, 如果當(dāng)前界面上的標(biāo)簽比較多, 那么性能就會(huì)比較差, 所以在企業(yè)開發(fā)中一般不會(huì)使用通配符選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>22-通配符選擇器</title>
<style>
/*
.cc{
color: red;
}
*/
*{
color: red;
}
</style>
</head>
<body>
<!--
<h1 class="cc">我是標(biāo)題</h1>
<p class="cc">我是段落</p>
<a href="#" class="cc">我是超鏈接</a>
-->
<h1>我是標(biāo)題</h1>
<p>我是段落</p>
<a href="#">我是超鏈接</a>
</body>
</html>
