首页 > 其他 > 详细

选择器种类介绍

时间:2021-03-16 22:13:51      阅读:25      评论:0      收藏:0      [点我收藏+]

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>


选择器种类介绍

原文:https://www.cnblogs.com/hjjhjj/p/14545563.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!