CSS选择器

发布时间:2020-07-31 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了CSS选择器脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

选择器      实例  实例说明  css版本

一.常用选择器

  E{...}类型选择器

element p 选择所有<p>元素 1

分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         h1{
 8             color: red;  /* 将h1作为类型选择 */
 9         }
10     </style>
11 </head>
12 <body>
13     <h1>E{...}类型选择器</h1>
14 </body>
15 </html>
View Code

  #id选择器

#id #firstname 选择所有id="firstname"的元素

分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #i{
 8             color: blue;     /* 注意#号 */
 9         }
10     </style>
11 </head>
12 <body>
13     <p id="i">#id选择器</p>
14 </body>
15 </html>
View Code

   class选择器

.class .intro 选择所有class="intro"的元素

分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .intro{
 8             color: yellow;
 9         }
10         .unintro{
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16     <h1 class="intro">class选择器</h1>
17     <h1 class="unintro">class选择器</h1>   
18     <h1 class="intro">class选择器</h1>
19     <h1 class="unintro">class选择器</h1>
20     <h1 class="intro">class选择器</h1>
21 </body>
22 </html>
View Code

总结

以上是脚本之家为你收集整理的CSS选择器全部内容,希望文章能够帮你解决CSS选择器所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478