CSS学习笔记(一)-1.基础选择器

一、标签选择器

选择指定标签设置样式

优点：快

缺点：同类标签不能差异化

1.平级标签的样式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>01-CSS标签选择器</title>
 9     <style>
10         p {
11             color: red;
12         }
13         
14         h2 {
15             color: pink;
16         }
17         /* body {
18             color: blue;
19         } */
20     </style>
21 </head>
22 
23 <body>
24     <p>我是段落</p>
25     <h2>我是标题H2</h2>
26 </body>
27 
28 </html>
View Code

页面样式

 

 

2.父子标签样式关系

结论：2.1 如果子标签有样式，则显示为子标签样式。

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>01-CSS标签选择器</title>
 9     <style>
10         p {
11             color: red;
12         }
13         
14         h2 {
15             color: pink;
16         }
17         
18         body {
19             color: blue;
20         }
21     </style>
22 </head>
23 
24 <body>
25     <p>我是段落</p>
26     <h2>我是标题H2</h2>
27 </body>
28 
29 </html>
View Code

2.2 如果子标签没有样式，则继承父标签的样式。

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8     <title>01-CSS标签选择器</title>
 9     <style>
10         /* p {
11             color: red;
12         } */
13         /* h2 {
14             color: pink;
15         } */
16         
17         body {
18             color: blue;
19         }
20     </style>
21 </head>
22 
23 <body>
24     <p>我是段落</p>
25     <h2>我是标题H2</h2>
26 </body>
27 
28 </html>
View Code

 

二、类选择器

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

 

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

 

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

 

 3.代码如下：

View Code

 

 三、ID选择器

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:26:33
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 17:30:39
 7  * @Description: 
 8  * @FilePath: \CSS2\03-CSS-ID选择器.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>03-CSS-ID选择器</title>
18     <style>
19         #pink {
20             color: pink;
21             font-size: 40px;
22         }
23     </style>
24 </head>
25 
26 <body>
27     <div id='pink'>css1</div>
28     <div id='pink'>css2</div>
29 </body>
30 
31 </html>
View Code

 

 

ID选择器建议标签只用一次。而在本CASE中2个标签均使用了ID选择器。（这样写是否正确？） 

 

四、通配符选择器

就是使用通配符对符合条件的标签改变样式

 1 <!--
 2  * @Author: invoker
 3  * @Github: https://github.com/invoker2021
 4  * @Date: 2021-07-09 17:45:21
 5  * @LastEditors: invoker
 6  * @LastEditTime: 2021-07-09 17:46:38
 7  * @Description: 
 8  * @FilePath: \CSS2\04-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>04-CSS-通配符选择器</title>
18     <style>
19         * {
20             color: blueviolet;
21         }
22     </style>
23 </head>
24 
25 <body>
26     <p>我是段落</p>
27     <h2>我是标题h2</h2>
28 </body>
29 
30 </html>
View Code

 

 

 

posted @ 2021-07-09 16:30  kaer_invoker  阅读(29)  评论(0)  编辑  收藏  举报