前端 CSS的選擇器 高級選擇器
阿新 • • 發佈：2019-05-01
height mpat mage block active textarea img sca gree
高級選擇器分為：
-
後代選擇器
-
兒子選擇器
-
並集選擇器
-
交集選擇器
後代選擇器
使用空格表示後代選擇器。父元素的後代（包括兒子，孫子，重孫子）
後代選擇器 在CSS中使用非常頻繁
因為HTML元素可以嵌套，所以我們可以從某個元素的後代查找特定元素，並設置樣式：
/*div內部的p標簽設置字體顏色*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 後代選擇器 */ div p{ color: red; } </style> </head> <body> <div class="c1"> <div> <p>第一個段落</p> </div> </div> </body> </html>
從div的所有後代中找p標簽，設置字體顏色為紅色
/*div內部的div內部的p標簽設置字體顏色*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 後代選擇器 */ div div p{ color: red; } </style> </head> <body> <div class="c1"> <div> <p>第一個段落</p> </div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 後代選擇器 */ .c1 div p{ color: green; } </style> </head> <body> <div class="c1"> <div> <p>第一個段落</p> </div> </div> </body> </html>
兒子選擇器
使用>表示兒子選擇器。比如div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p
/*選擇所有父級是 <div> 元素的 <p> 元素*/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 兒子選擇器 */ .c1>p{ color: green; } </style> </head> <body> <div class="c1"> <p>另外一個段落</p> <div> <p>第一個段落</p> </div> </div> </body> </html>
從div的直接子元素中找到p標簽，設置字體顏色為綠色
選中應用c1類的div 裏面的兩個p標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 兒子選擇器 */ .c1>p{ color: green; } </style> </head> <body> <div class="c1"> <p>另外一個段落</p> <div> <p>第一個段落</p> </div> <p>另外一個段落2</p> </div> </body> </html>
交集選擇器
對標簽選擇器和類選擇器 有個交集
使用.表示交集選擇器。第一個標簽必須是標簽選擇器，第二個標簽必須是類選擇器 語法：div.active
比如有一個<h3 class=‘active‘></h3>這樣的標簽。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 交集選擇器 */ h3{ color: red; } .active{ font-size: 30px; } h3.active{ background-color: green; } </style> </head> <body> <div> <ul> <li class="item"> <h3 class="active">我是一個h3</h3> </li> </ul> </div> </body> </html>
它表示兩者選中之後元素共有的特性
交集選擇器通常和js配合使用
並集選擇器
當多個標簽的樣式相同的時候，我們沒有必要重復地為每個標簽都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的並集選擇器來設置多個標簽統一樣式。
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標簽。一些共性的元素，可以使用並集選擇器
為a標簽和h4標簽統一設置字體為紅色,字體大小30px的樣式。
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title</title> <style type="text/css"> /* 並集選擇器 */ a,h4{ color: red; font-size: 30px; } </style> </head> <body> <div> <h4>h4標簽</h4> <ul> <li> <h4>h4標簽</h4> </li> </ul> <a>a標簽</a> </div> </body> </html>
比如像百度首頁使用並集選擇器。
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td { margin: 0; padding: 0 } /*使用此並集選擇器選中頁面中所有的標簽，頁面布局的時候會使用*/
前端 CSS的選擇器 高級選擇器