html选择器_css的9个常用选择器
生活随笔
收集整理的這篇文章主要介紹了
html选择器_css的9个常用选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.類選擇器（通過類名進行選擇）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">.p1{color: #00ff00;}.p2{color: #0000ff;} </style> <body><p class="p1">這是類選擇器</p><p class="p2">hello world</p> </body> </html>效果圖：
2.id選擇器（通過id進行選擇）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">#text{color: red;} </style> <body><p id="text">這是id選擇器</p> </body> </html>效果圖：
3.標簽選擇器（通過id進行選擇）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">p{color: #f40;font-size: 25px;} </style> <body><div><p>這是標簽選擇器</p></div> </body> </html>效果圖：
4.分組選擇器（可一次選擇多個標簽以設置相同樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">p,a,li{color: blue;} </style> <body> <p>這是分組選擇器</p> <p>hello</p> <a href="#">world</a><div><ul><li>1</li><li>2</li><li>3</li></ul></div> </body> </html>效果圖：
5.后代選擇器（選擇某個標簽的所有后代以設置相同樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">div ul li{color: red;list-style: none;} </style> <body><div><ul><li>1</li><li>2</li><li>3</li></ul></div> </body> </html>效果圖：
6.屬性選擇器（通過屬性（如name屬性）進行選擇以設置相同的樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">[name="pra1"]{color: blue;}[name="pra2"]{color: red;} </style> <body><p name="pra1">這是屬性選擇器</p><p name="pra2">hello world</p> </body> </html>效果圖：
7.通用選擇器（選擇所有標簽以設置相同樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">*{color: red;} </style> <body><p>這是通用選擇器</p><p>hello</p><p>world</p> </body> </html>效果圖：
8.兄弟選擇器（選擇兄弟關系的標簽設置樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">p+a{color: green;} </style> <body><p>這是兄弟選擇器</p><a>hello world</a> </body> </html>效果圖：
9.直接父子選擇器（選擇父子關系的標簽中子標簽設置樣式）
<!DOCTYPE html> <html> <head><title></title> </head> <style type="text/css">div>p {color: red;} </style> <body><div><p>這是直接父子選擇器</p></div> </body> </html>效果圖：
原文地址：css的9個常用選擇器 - 嚼著炫邁去追夢 - 博客園作者：嚼著炫邁去追夢
總結
以上是生活随笔為你收集整理的html选择器_css的9个常用选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序有没有类似js的 getEle
- 下一篇： mybatis collection_M