【前端笔记】CSS 选择器的常见用法

目录

• [1. CSS 的基本语法规范](#1. CSS 的基本语法规范)
• [2. CSS 的引入方式](#2. CSS 的引入方式)
• [3. CSS 选择器的种类](#3. CSS 选择器的种类)
• • [3.1 标签选择器](#3.1 标签选择器)
  • [3.2 类选择器](#3.2 类选择器)
  • [3.3 id 选择器](#3.3 id 选择器)
  • [3.4 复合选择器](#3.4 复合选择器)
  • [3.5 通配符选择器](#3.5 通配符选择器)
• [4. 补充内容](#4. 补充内容)

1. CSS 的基本语法规范

选择器 + {1 条 / n 条声明}

• 选择器决定的是修改谁
• 声明决定的是怎么修改
• 声明的属性是键值对，使用 ; 区分键值对，使用 : 区分键和值

2. CSS 的引入方式

引入方式	描述
行内样式	在标签内使用 style 属性
内部样式	一般在 HTML 的 head 标签中定义 style 标签，在标签内部定义 css 样式
外部样式（常用）	一般在 HTML 的 head 标签中定义 link 标签，通过 href 属性引入 css 外部文件

行内样式：

内部样式：

外部样式：

css.css 文件：

3. CSS 选择器的种类

3.1 标签选择器

在 head 标签中定义 style 标签，含义为将选中的标签全部更改为自己所定义的样式；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* 1. 标签选择器 */
        /* 将全部 div 标签改为红色，p 标签改为蓝色，h1 标签改为绿色 */
        div {
            color: red;
        }
        p {
            color: blue;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <div>我是div1</div>
    <div>我是div2</div>
    <p>我是p标签1</p>
    <p>我是p标签2</p>
</body>
</html>

代码运行结果：

3.2 类选择器

这个类的意思和 Java 中的类概念不同，这里表示一类、分类；

在标签后加入 class 属性对标签进行分类更改样式；

类选择器前边要加点（.）；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* 2. 类选择器 */
        /* 将 red 类改为红色，将 green 类改为绿色 */
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <div class="red">我是div1</div>
    <divc class="green">我是div2</div>
    <p class="red">我是p标签1</p>
    <p class="green">我是p标签2</p>
</body>
</html>

代码运行结果：按不同类进行了颜色的更改

3.3 id 选择器

在上述代码的基础上，如果想对p标签1再进行颜色更改，可以加如 id 属性；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        /* 3. id选择器 */
        /* 将id="p1"的标签改为棕色 */
        #p1 {
            color: brown;
        }
    </style>
</head>
<body>
    <h1>一级标题</h1>
    <div class="red">我是div1</div>
    <divc class="green">我是div2</div>
    <p class="red" id="p1">我是p标签1</p>
    <p class="green">我是p标签2</p>
</body>
</html>

代码运行结果：

3.4 复合选择器

复合选择器就是由多个单选择器组成；

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 4. 复合选择器 */
        /* 表示只更改li标签下的a标签 */
        li a {
            color: red;
        }
        /* 表示只更改id为middle标签下的li标签 */
        #middle li {
            color: red;
        }
        /* 表示只更改ul标签下li标签的a标签 */
        ul li a {
            color: green;
         }
         /* 表示只更改ol标签下li标签的a标签 */
         ol li a {
            color: pink;
        }
        /* 表示将id为a1,a2的标签一并修改 */
        #a1, #a2 {
            color: pink;
        }
        /* 等价于ul li a {} 写法*/
        ul>li>a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="font32">我是一个div, class为font32</div>
    <div class="font32">我是一个div, class为font32</div>
    <div><a href="#">我是一个div</a></div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#" id="a1">ccc</a></li>
    </ul>
    <ol id="middle">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li><a href="#" id="a2">3333</a></li>
    </ol>
    <button id="submit">提交</button>
</body>
</html>

运行结果这里不做展示

3.5 通配符选择器

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 5. 通配符选择器 */
        /* 将所有标签改为绿色，字体改为40像素 */
        * {
            color: green;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div class="font32">我是一个div, class为font32</div>
    <div><a href="#">我是一个div</a></div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#" id="a1">ccc</a></li>
    </ul>
    <ol>
        <li>1111</li>
        <li>2222</li>
    </ol>
    <button id="submit">提交</button>
</body>
</html>

运行结果：

4. 补充内容

1. 当指定样式存在多处定义时，一般遵循就近原则，谁离得近就是谁的设计样式；
2. 当一个标签中 class 和 id 同时定义了相同属性的不同参数时， id 的样式生效；
3. 上文代码中 ul a {} ，ul 下面的标签，a 不需要紧挨着 ul，a 是 ul 的子孙即可；ul>li>a {} ul 下面的标签，li 必须要紧挨着 ul，a 必须要紧挨着 li，必须是父子关系；
4. 颜色 color 表示有三种，英文单词、RGB、十六进制，一般使用后两种，表示的颜色范围更广；