首页 > Web开发 > 详细

007 CSS基本选择器

时间:2019-05-07 00:08:49      阅读:194      评论:0      收藏:0      [点我收藏+]

  复习。

一:类选择器

1.多类名选择器

  使用场景:某个标签上需要多个类进行描述。

  多个类之间使用空格分开。

  冲突的时候,和类名在html中的先后顺序没有关系,和css中的样式的先后顺序有关系。

  

2.案例

  需求:将几个div标为红色,然后将第一个div还要字体变大为40.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .red{
 8             color: red;
 9         }
10         .font20{
11             font-size: 40px;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="red font20">多类名</div>
17     <div>多类名</div>
18     <div>多类名</div>
19     <div class="red">多类名</div>
20     <div>多类名</div>
21     <div class="red">多类名</div>
22     <div>多类名</div>
23 </body>
24 </html>

 

3.效果

  技术分享图片

 

二:id选择器

1.说明

  使用#

 

三:通配符选择器

1.通配符选择器

  *   :所有

  ?:一个的意思

 

2.案例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             color: red;
 9         }
10         
11     </style>
12 </head>
13 <body>
14     <div class="red font20">多类名</div>
15     <p>多类名</p>
16     <span>多类名</pan>
17 </body>
18 </html>

 

3.效果

  技术分享图片

 

四:标签选择器

1.说明

  标签后面加选择器

 

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

007 CSS基本选择器

原文:https://www.cnblogs.com/juncaoit/p/10822921.html

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