css选择器介绍

绝地灬酷狼 2024-02-05 14:51 41阅读 0赞

## css选择器介绍 ##

### 01 css概念介绍 ###

*  用于更改标签的视觉效果

### 02 css格式 ###

*  选择器 \{属性1：值1；属性2：值2\}

### 03 三种样式 ###

#### 1.内联样式 ####

*  直接写在标签的`style`属性中。
    
     *  优点：简单明显
     *  缺点：无法重复使用代码

<img src="image-20231212183411453.png" alt="图片加载失败">
        <div style="color: blue">芙芙真可爱</div>

*  效果图

![在这里插入图片描述][14a2cc9349834cfd90b4681590facb9f.png_pic_center]

#### 2.内部样式 ####

*  在html文件的`<head> </head>`标签域中，添加`<style> <style>`标签，将css代码书写其中。
 *  优点：可以通过选择器重复使用代码
 *  缺点：选择器的使用较为繁琐

<!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>
            .fufu{
                color: gold;
            }
    
        </style>
    </head>
    <body>
        <img src="image-20231212183411453.png" alt="图片加载失败">
        <div style="color: blue">芙芙真可爱</div>
        <div class="fufu">芙芙爱吃通心粉</div>
    </body>
    
    </html>

*  效果图

![在这里插入图片描述][cb5258b6dfa54f70a4542db4240138aa.png_pic_center]

#### 3.外联样式 ####

*  在html文件的`<head> </head>`标签域中，通过`<link>`标签，引入一个`.css`文件，该文件的书写格式和【内部样式】相同。
 *  可以通过选择器重复使用代码
    
     *  优点：当项目中css属性过多时减少单个文件大小
 *  案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <link rel="stylesheet" href="fu.css">
        <style>
            .fufu{
                color: gold;
            }
    
        </style>
    </head>
    <body>
        <img src="image-20231212183411453.png" alt="图片加载失败">
        <div style="color: blue">芙芙真可爱</div>
        <div class="fufu">芙芙爱吃通心粉</div>
        <div class="fu">水神芙宁娜</div>
    </body>
    
    </html>}

![在这里插入图片描述][5b99cdeb1d9d4a5cb235e71194378823.png_pic_center]

#### 4.样式优先级介绍 ####

*  内联 > 内部 / 外部
 *  内联优先级最大
 *  内部和外部优先级取决于css代码**上下文顺序**，靠后的大，会**覆盖**前一个选择器的相同属性。

### 04 三种选择器介绍 ###

#### 1.元素选择器 ####

匹配到`标签名`相同的标签，更改样式。

**语法**：

*  **标签**：`<标签> </标签>`
 *  **css**：`标签名 { /* css代码 */ }`

*  效果图

![在这里插入图片描述][e257cce229c743e7993e1f01549cf5d6.png_pic_center]

*  优点：同时设置所有同类型标签
 *  缺点：无法单一设置，不常用

#### 2.id 选择器 ####

匹配到`id名`相同的标签，更改样式。

**语法**：

*  **标签**：`<标签 id="id名" >`
 *  **css**：`#id名 { /* css代码 */ }`

**注意**：一个html文档中，不能出现两个同`id`的标签。

**案例**

*  效果图

![在这里插入图片描述][365129823e8843acbebfff3385ec018c.png_pic_center]

*  缺点：id值需要唯一，虽然现在不会有报错，但不符合规范

#### 3.class 选择器 ####

匹配到`class名`相同的标签，更改样式。

**语法**：

*  **标签**：`<标签 class="class名" >`
 *  **css**：`.class名 { /* css代码 */ }`

*  效果图  
    ![在这里插入图片描述][be2186fe4b414da593e7ef07d26d026c.png_pic_center]

**特点**：

*  **多个标签可以`class`同名**：一个选择器样式作用多个标签。
 *  **单个标签可以写多个`class`值(空格隔开)**：多个选择器样式，作用于一个标签，同属性设置会根据【css上下文顺序】覆盖。

[14a2cc9349834cfd90b4681590facb9f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/7d6a964a167c4fe488471df037702af6.png
[cb5258b6dfa54f70a4542db4240138aa.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/ed53b231527446cb8b7e29e88dffdb4c.png
[5b99cdeb1d9d4a5cb235e71194378823.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/7c27706e9b214e56a6238de30616c8c5.png
[e257cce229c743e7993e1f01549cf5d6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/7a6a18e09884466d815b7687cab4cb6e.png
[365129823e8843acbebfff3385ec018c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/999c5c13cafc4cf4bffe5c3b3919f051.png
[be2186fe4b414da593e7ef07d26d026c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/05/64cd8e6f4ba34ca1a627b0838d95cade.png