css之選擇器
css選擇器
基本選擇器
1,id選擇器
1、作用：
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然後設置屬性
2、格式
id名稱 {
屬性：值;
}
3、註意點：
1、在企業開發中如果僅僅只是為了設置樣式，通常不會使用id，在前端開發中id通常是留給js使用的
2、每個標簽都可以設置唯一一個id，id就相當於人/標簽的身份證，因此在同一界面內id絕不能重復
3、引用id一定要加#
4、id的命名只能由字符、數字、下劃線組成，且不能以數字開頭，更不能是html關鍵字如p，a，img等
示例 <head> <style> #p1{ color: red; } #p2 { color: green; } #p3 { color:blue; } </style> </head> <body> <p id="p1">213131231231</p> <p id="p2">123131231</p> <p id="p3">123123132132</p>
類選擇器
1、作用：根據指定的類名稱，在當前界面中找到對應的標簽，然後設置屬性
2、格式：
.類名稱 {
屬性：值;
}
3、註意點：
1、類名就是專門用來給某個特定的標簽設置樣式的
2、每個標簽都可以設置一個或多個class（空格分隔），class就相當於人/標簽的名稱，因此同一界面內class可以重復
3、引用class一定要加點.
4、類名的命名規則與id的命名規則相同
<head> <style> .p1{ color: red; } .p2 { color: green; } .p3 { color:blue; } </style> </head> <body> <p class="p1">213131231231</p> <p class="p2">123131231</p> <p class="p3">123123132132</p> </body>
標簽選擇器
1、作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然後設置屬性
2、格式：
標簽名稱 {
屬性：值;
}
3、註意點：
1、只要是HTML的標簽都能當做標簽選擇器
2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽
3、標簽選擇器，無論嵌套多少層都能選中
通配符選擇器
1、作用：選擇所有標簽
2、格式：
- {
屬性：值；}
3、註意點：
在企業開發中一般不會使用通配符選擇器
理由是：
由於通配符選擇器是設置界面上所有的標簽的屬性，
所以在設置之前會遍歷所有的標簽
如果當前界面上的標簽比較多，那麽性能就會比較差
<head> <style> * { color: red; } </style> </head> <body> <h1>wo shi biao ti</h1> <p>wo shi duan luo</p> <a href="#">wo shi chao lian jie</a>
後代選擇器，子元素選擇器
後代選擇器
1、作用：找到指定標簽的所有後代標簽，設置屬性
2、格式：
標簽名1 xxx {
屬性：值;
}
3、註意：
1、後代選擇器必須用空格隔開
2、後代不僅僅是兒子，也包括孫子、重孫子
3、後代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class
4、後代選擇器可以通過空格一直延續下去
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style>
div p {
color: red;
}
#id1 li p{
font-size: 50px;
}
div ul li a{
font-size: 100px;
color:green;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那麽多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落</p>
<a href="">點我啊1</a>
</li>
<li>
<a href="#">點我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>
</html>
子元素選擇器
1、作用：找到指定標簽的所有特定的直接子元素，然後設置屬性
2、格式：
標簽名1>標簽名2 {
屬性：值;
}
先找到名稱叫做"標簽名稱1"的標簽，然後在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素
3、註意：
1、子元素選擇器之間需要用>符號鏈接，並且不能有空格
比如div >p會找div標簽的所有後代標簽，標簽名為">p"
2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽
3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class
4、子元素選擇器可以通過>符號一直延續下去
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style>
body>p {
color: green;
}
div>p {
color: red;
}
.aaa>a {
font-size: 100px;
}
div>ul>li>.ddd {
color: blue;
}
</style>
</head>
<body>
<p>我是body下的段落1</p>
<!--如果想為div內所有標簽都設置屬性，無論用id還是class都不合理，因為當div內的標簽過多，我們無法加那麽多id或者class-->
<div id="id1" class="part1">
<p>我是div下的段落1</p>
<p>我是div下的段落2</p>
<ul>
<li class="aaa">
<p class="ccc">我是ul>li下的段落1</p>
<p class="ddd">我是ul>li下的段落2</p>
<a href="">點我啊1</a>
</li>
<li>
<a href="#">點我啊2</a>
</li>
</ul>
</div>
<p>我是body下的段落2</p>
</body>兄弟選擇器
相鄰兄弟選擇器
1、作用：給指定選擇器後面緊跟的那個選擇器選中的標簽設置屬性
2、格式
選擇器1+選擇器2 {
屬性：值;
}
3、註意點：
1、相鄰兄弟選擇器必須通過+號鏈接
2、相鄰兄弟選擇器只能選中你緊跟其後的那個標簽，不能選中被隔開的標簽
通用兄弟選擇器
1、作用：給指定選擇器後面的所有選擇器中的所有標簽設置屬性
2、格式：
選擇器1~選擇器2 {
屬性：值;
}
3、註意點：
1、通用兄弟選擇器必須用~來鏈接
2、通用兄弟選擇器選中的是指選擇器後面的某個選擇器選中的所有標簽
無論有沒有被隔開，都可以被選中
<head>
<meta charset="UTF-8">
<title>兄弟選擇器</title>
<style>
h1+p {
font-size: 50px;
}
h1~p {
color: red;
}
</style>
</head>
<body>
<h1 >我是標題1</h1>
<a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<p>我是段落</p>
<h1>我是標題2</h1>
<p>我是段落</p>
</body>css之選擇器