首页 CSS

# CSS 基础选择器

# 标签选择器

  • 结构：标签名
  • 作用：通过标签名，找到页面中所有这类标签，设置样式
  • 注意点 :
    1. 标签选择器选择的是一类标签，而不是单独某一个
    2. 标签选择器无论嵌套关系有多深，都能找到对应的标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
        /*标签选择器*/
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>我是一个段落pppppppp</p>
    <p>但是这个p我不想变成红色</p>
</body>
</html>

# 类选择器

  • 结构 : . 类名
  • 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
  • 注意点 :
    1. 所有标签上都有 class 属性，class 属性的属性值称为类名 (类似于名字)
    2. 类名可以由数字，字母，下划线，中划线组成，但不能以数字或者中划线开头
    3. 一个标签可以同时有多个类名，类名之间以空格隔开
    4. 类名可以重复，一个类选择器可以同时选中多个标签

​

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        .one {
            color: red;
        }
        .two {
            color: blue;
        }

        .size {
            font-size: 90px;
        }
    </style>
</head>
<body>
    <p class="one">我是一个段落标签ppppppp</p>
    <p class="two">我是另一个段落标签pppppppppp</p>
    <div class="one">我是div标签</div>
    <div class="one size" >我是有两个类名的div标签</div>
</body>
</html>

# id 选择器

  • 结构 : #id 属性值
  • 作用：通过 id 属性值，找到页面中带有这个 id 属性值的标签，设置样式
  • 注意点 :
    1. 所有标签上都有 id 属性
    2. id 属性值类似于身份证号码，在一个页面中是唯一的，不可重复的
    3. 一个标签上只能有一个 id 属性值
    4. 一个 id 选择器只能选中一个标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        #one {
            font-size: 70px;
            color: blue;
        }

        #two {
            font-size: 30px;
            color: red;
        }
    </style>
</head>
<body>
    <div id="one">我是一个div标签嘿嘿嘿</div>
    <div id="two">我是一个div标签嘿嘿嘿</div>
</body>
</html>

# 通配符选择器

  • 结构 : *
  • 作用：找到页面中所有的标签，设置样式
  • 注意点 :
    1. 开发中使用极少，只会在极特殊情况下才会用到
    2. 小页面中可能会用于去除标签默认的 margin 和 padding
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>ppp</p>
    <span>span</span>
    <h1>h1</h1>
</body>
</html>