首页 > 其他分享> 文章详细

CSS学习笔记(一)-2.类选择器的使用

2021-07-09 17:34:27 阅读：77 来源： 互联网

标签：color 标签笔记 red 使用选择器 CSS

一、类选择器

优点：相同标签可以使用不同的类选择器来定义自己的样式。

1.一个标签可以使用多个类，中间空格分开。

2.如果类的名称较长，使用横杠分开

3.代码如下：

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 16:45:52
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 17:15:12
 7  * @Description: 
 8  * @FilePath: \CSS2\02-CSS类选择器.html
 9 -->
10 <!DOCTYPE html>
11 <html lang="en">
12 
13 <head>
14     <meta charset="UTF-8">
15     <meta http-equiv="X-UA-Compatible" content="IE=edge">
16     <meta name="viewport" content="width=device-width, initial-scale=1.0">
17     <title>02-CSS类选择器</title>
18     <style>
19         .white-blue {
20             color: #33CCFF;
21         }
22         
23         .red {
24             color: red;
25         }
26         
27         .zise {
28             color: #CC33FF;
29         }
30         
31         .big {
32             font-size: 35px;
33         }
34     </style>
35 </head>
36 
37 <body>
38     <ul>
39         <li class='white-blue'>幽灵漫步</li>
40         <li class='red big'>混沌陨石</li>
41         <li class='red'>天火</li>
42         <li class='white-blue'>冰墙</li>
43         <li class='zise'>电磁脉冲</li>
44     </ul>
45 </body>
46 
47 </html>

View Code

标签：color,标签,笔记,red,使用,选择器,CSS
来源： https://www.cnblogs.com/invoker2021/p/14991501.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS学习笔记(一)-2.类选择器的使用