11.3 css 11.31 基本選擇器 根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然後設置屬性 作用：根據指定的類名稱，在當前界面中找到對應的標簽，然後設置屬性 作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然後設置屬性 註意： 1、只要是HTML的標簽都能當做標簽選 ...
11.3 css
11.31 基本選擇器
11.311 id選擇器
根據指定的id名稱，在當前界面中找到對應的唯一一個的標簽，然後設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 {color: red;} 引用id一定要加# #p2 {color: green;} #p3 {color: blue;} </style> </head> <body> <p id="p1">大多數人的帥，都是浮在錶面的，是外表的帥</p> <p id="p2">而我，不僅具備外表帥，內心更是帥了一逼</p> <p id="p3">就是我，我就是</p> </body> </html>
11.312 類選擇器
作用：根據指定的類名稱，在當前界面中找到對應的標簽，然後設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .p1 {color: red;} #引用class一定要加點. .p2 {font-size: 50px;} .p3 {text-decoration: underline;} </style> </head> <body> <p class="p1">大多數人的帥，都是浮在錶面的，是外表的帥</p> <p class="p2">而我，不僅具備外表帥，內心更是帥了一逼</p> <p class="p3">那就是我</p> <!-- 第一行與第三行的顏色都是紅色 第一行與第二行的字體大小都是50px 第二行與第三行內容有個下劃線 --> <p class="p1 p2">大多數人的帥，都是浮在錶面的，是外表的帥</p> <p class="p2 p3">而我，不僅具備外表帥，內心更是帥了一逼</p> <p class="p3 p1">那就是我</p> </body> </html>
11.313 標簽選擇器
作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然後設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p {color: red;} </style> </head> <body> <p>美麗的外表下其實隱藏著一顆騷動的心</p> <ul> <li> <p>這顆心叫做七巧玲瓏心，男人吃了會流淚，女人吃了會懷孕</p> </li> </ul> </body> </html>
註意： 1、只要是HTML的標簽都能當做標簽選擇器 2、標簽選擇器選中的是當前界面中的所有標簽,而不能單獨選中某一標簽 3、標簽選擇器，無論嵌套多少層都能選中
11.314 通配符選擇器
作用：選擇所有標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * {color: red;} #把所有的標簽設置相同的屬性 </style> </head> <body> <h1 >我是標題</h1> <p >我是段落</p> <a href="#">我是超鏈接</a> </body> </html>
11.32 組合選擇器
11.321 後代選擇器
作用：找到指定標簽的所有後代（兒子，孫子，重孫子、、、）標簽，設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .part1 p {color: red;} # 1 找到part1下的所有p標簽，添加屬性 #id1 ul p {color: red;} # 2 找到一個id='id1'下的ul下的所有p標簽 </style> </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p># 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p># 1 2 </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> </body> </html>
註意：1、後代選擇器必須用空格隔開 2、後代不僅僅是兒子，也包括孫子、重孫子 3、後代選擇器不僅僅可以使用標簽名稱，還可以使用其他選擇器比如id或class 4、後代選擇器可以通過空格一直延續下去
11.322 子元素選擇器
作用：找到指定標簽的所有特定的直接子元素，然後設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #id1>p {color: red;} # 1 找到id='id1'下的子標簽p，添加屬性 .part1 ul .aaa>a {color: red;} </style> #2 找到class='part1'下的所有標簽ul下的class=aaa的子標簽a,添加屬性 </head> <body> <p>我是body下的段落1</p> <div id="id1" class="part1"> <p>我是div下的段落1</p> # 1 <ul> <li class="aaa"> <p class="ccc">我是ul>li下的段落1</p> <a href="">點我啊1</a> # 2 <p> <a href="">點我啊2</a> </p> </li> <li> <a href="#">點我啊3</a> </li> </ul> </div> <div> <p>hahahahah</p> </div> <p>我是body下的段落2</p> <a href="#">百度一下</a> </body> </html>
註意： 1、子元素選擇器之間需要用>符號鏈接，並且不能有空格，比如div >p會找div標簽的所有後代標簽，標簽名為">p" 2、子元素選擇器只會查找兒子，不會查找其他嵌套的標簽 3、子元素選擇器不僅可以用標簽名稱，還可以使用其他選擇器,比如id或class 4、子元素選擇器可以通過>符號一直延續下去
11.323相鄰兄弟與通用兄弟選擇器
相鄰兄弟選擇器：只能選中緊跟其後的那個標簽，不能選中被隔開的標簽
通用兄弟選擇器：給指定選擇器後面的所有選擇器中的所有標簽設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>後代選擇器</title> <style type="text/css"> #相鄰兄弟選擇器 h1+p {color: red;}#相鄰兄弟選擇器必須通過+號鏈接 x #通用兄弟選擇器 h1~p {color: red;}#通用兄弟選擇器必須用~來鏈接 y </style> </head> <body> <h1>我是標題1</h1> <a href="">有了這個標簽，p就不再是緊跟h1標簽了,但通用兄弟選擇器仍然能選中</a> <p>我是段落</p> #y <p>我是段落</p> #y <h1>我是標題2</h1> <p>我是段落</p> #x y </body> </html>
11.33 交集與並集選擇器
11.331 並集選擇器
作用：給所有滿足條件的標簽設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p,a {color: red;} #找到所有p標簽和a標簽，添加屬性 </style> </head> <body> <h1>哈哈啊</h1> <p class="part1">我是段落1</p> <a href="#" class="part2">a標簽</a> </body> </html>
註意： 1、選擇器與選擇器之間必須用逗號來鏈接 2、選擇器可以使用標簽名稱、id、class
11.332 交集選擇器
作用：給所有選擇器選中的標簽中，相交的那部分標簽設置屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a.part2 {color: red;} #找到同時有a標簽且class="part2"，添加屬性 </style> </head> <body> <h1>哈哈啊</h1> <p class="part2">我是段落2</p> <a href="#" class="part2">a標簽1</a> #此處文本變成紅色 <a href="#">a標簽2</a> </body> </html>
註意： 1、選擇器與選擇器之間沒有任何鏈接符號 2、選擇器可以使用標簽名稱、id、class
11.34 序列選擇器
#2.1 同級別
:first-child p:first-child 同級別的第一個
:last-child p:last-child 同級別的最後一個
:nth-child(n) 同級別的第n個
:nth-last-child(n) 同級別的倒數第n個
#2.2 同級別同類型
:first-of-type 同級別同類型的第一個
:last-of-type 同級別同類型的最後一個
:nth-of-type(n) 同級別同類型的第n個
:nth-last-of-type(n) 同級別同類型的倒數第n個
#2.3 其他
:only-of-type 同類型的唯一一個
:only-child 同一級別唯一一個
11.341同級別序列選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-child {color: red;} #同一級別第一個p x p:last-child {color: red;} #同一級別倒數第一個p y p:nth-child(3) {color: red;} #同一級別第3個p z p:nth-last-child(3) {color: red;}#同一級別倒數第3個p w </style> </head> <body> <h1>我是標題1</h1> <p>我是段落1</p> <a href="">aaaaa</a> <p>我是段落2</p> <p>我是段落3</p> #w <p>我是段落4</p> <p>我是段落5</p> #y <div> <p>我是段落6</p> #x w <a href="">我是a標簽</a> <h1>我是標題2</h1> </div> </body> </html>
11.342同級別同類型序列選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p:first-of-type {color: red;} # 同級別同類型的第一個p x p:last-of-type {olor: red;} # 同級別同類型的倒數第一個p y p:nth-of-type(3) {color: red;} # 同級別同類型的第3個p z p:nth-last-of-type(3) {color: red;} # 同級別同類型的倒數第3個p u p:only-child {color: red;} # 同一級別唯一一個p 不存在 p:only-of-type {color: red;} # 同類型的唯一一個 不存在 </style> </head> <body> <h1>我是標題1</h1> <p>我是段落1</p> #x <a href="">aaaaa</a> <p>我是段落2</p> <p>我是段落3</p> #z u <p>我是段落4</p> <p>我是段落5</p> #y <div> <a href="">我是a標簽</a> <p>我是段落6</p>#x u <p>我是段落7</p> <p>我是段落8</p>#y z <h1>我是標題2</h1> </div> <div> <p>我是獨生子</p>#x <p>我是獨生子</p>#y <a href="">我是二胎</a> <a href="">我是二胎</a> </div> </body> </html
