【第二部分 | CSS】1：万物始于选择器

浅浅的花香味﹌ 2023-09-26 09:52 120阅读 0赞

**目录**

| CSS书写位置及基本骨架

| CSS代码书写风格约定

| CSS基础选择器

选择器的分类

\[选择器\] 标签选择器

\[选择器\] 类选择器

小练习：用类选择器画箱子

类选择器 - 多类名

\[选择器\] ID选择器

\[选择器\] 通配符选择器

| CSS 复合选择器

复合选择器简介

后代选择器（重要）

子选择器

并集选择器（重要）

介绍：伪类选择器

链接伪类选择器

:focus伪类选择器

总结 复合选择器

--------------------

### **| CSS书写位置及基本骨架** ###

HTML负责结构，CSS负责样式。

![c34954e342924a29b63e642a2aa02e32.png][]

*  选择器确定结构的位置，声明语句确定样式
 *  在<head></head>中书写我们的CSS代码
 *  声明语句中使用键值对，且 必须打分号
 *  **重点：CSS 的注释语句是 /\* \*/ 而不是 <!- -> 千万不要弄错！**

###    **| CSS代码书写风格约定** ###

*  声明语句中， **一个属性占一行**
 *  字母都用 **小写**
 *  属性: 的 **冒号** 和 **值** 之间，需要保留一个空格
 *  **选择器** 和 **声明语句体** 之间，需要保留一个空格

--------------------

### **| CSS基础选择器** ###

选择器：选择标签用的，用来确定HTML某个标签的位置，然后在style中的代码修改被选中标签对应元素的样式

#### **选择器的分类** ####

*  基础选择器
    
     *  标签选择器
     *  类选择器
     *  id选择器
     *  通配符选择器
 *  复合选择器
    
     *  后代选择器

#### **\[选择器\] 标签选择器** ####

![bf68acc19121439f8eb149f37136b7b5.png][]

代码示例：把所有的 p 标签选择，然后修改样式

####    **\[选择器\] 类选择器** ####

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器

*  类选择器用的最多
 *  类的定义名字不能和任何标签同名、不能纯数字、不能中文
 *  开发的时候，尽可能遵循命名规范 （见《前端开发规范手册》）

![e8f6c38824304fe7855e8f81ca885a2b.png][]

代码示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .class{
                color: red;
            }
        </style>
    </head>
    <body>
        
        <p class="class">Text</p><br/>
        <p>Text</p><br/>
        <p class="class">Text</p><br/>
        <p>Text</p>
        <p>Text</p>
    </body>
    </html>

#### **小练习：用类选择器画箱子** ####

*  用三个div，相当于三个盒子 **从现在开始 形成一个观念：网页元素就是一个个盒子，div就是用来表示盒子的**
 *  第一个、第三个div定义同名class，第二个定义一个class。
 *  在style中定义 width height background-color 三个属性，从而得到下列图像

![73c1dc02b8f846d194279c2162180305.png][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .class1{
                width: 50px;
                height: 50px;
                background-color: blue;
            }
            .class2{
                width: 50px;
                height: 50px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="class1"></div>
        <div class="class2"></div>
        <div class="class1"></div>
    </body>
    </html>

####    **类选择器 - 多类名** ####

我们可以给一个标签指定多个类名，从而达到更多的选择目的。 这些类名都可以选出这个标签

*  多个类名之间必须用一个空格隔开
 *  可以通过操作不同的类名，完成对同一个元素的样式修改

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .className1{
                color: blue;
            }
            .className2{
                font-size: 30px;
            }
            .className3{
                background-color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            
            <p class="className1 className2 className3">类选择器多类名</p>
        </div>
    </body>
    </html>

*  多类名修改器存在的意义是：减少代码冗余，把不同样式标签中的相同样式抽取出来，统一编写和管理
 *  运用多类名，我们可以把 选择器画箱子 中的 width height 代码提取出来啦~

#### \[选择器\] ID选择器 ####

*  ID选择器具有唯一性，一个id名字 只能给一个标签定义和调用。 一般ID选择器用于JavaScript 的 findElementById函数

![149cb276085c4b709b9a05086df7840e.png][]

<head>
        <style>
        	#idName{
                color: aqua;
            }
        </style>
    </head>
    <body>
        <div>
            
            <p id="idName">哈哈哈</p>
        </div>
    </body>

ID选择器 和 类选择器 的区别

*  ID选择器：需要定义id 且 只能给一个id名只能给一个标签定义。 调用的时候使用 \#id
 *  类选择器：需要定义class 且 能给多个标签定义多个同名class。 调用的时候使用 .class

#### **\[选择器\] 通配符选择器** ####

![bc70f76d82aa46e9b876788674bea435.png][]

![42b78e1d42784dc399fb91e8a6ac4d10.png][]

###    **| CSS 复合选择器** ###

#### **复合选择器简介** ####

*  复合选择器可以更准确、更高效的选择目标元素（标签）
 *  复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
 *  常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

--------------------

#### **后代选择器（重要）** ####

语法： **基础选择器A** \+ **空格** \+ **A选择器的子类选择器** \+ **\{ // CSS 语句体\}**

*  基础选择器 知识点复习 传送门
 *  A选择器的子类选择器可以是：A的子选择器、孙子选择器、曾孙子选择器…… 只要是在A里面就行

![b4493995ca7a466f9e5101c142d47eff.png][]

--------------------

#### **子选择器** ####

子选择器的作用和后代选择器一模一样，区别在于

*   子选择器只能选择 “A选择器的亲儿子” 作为第二个选择器
 *  多个选择器之间使用  >  连接

--------------------

#### **并集选择器（重要）** ####

*  并集选择器可以选择多组标签, 同时为他们定义相同的样式 通常用于集体声明
 *  并集选择器是各选择器 通过英文逗号（,）连接而成  ，任何形式的选择器都可以作为并集选择器的一部分。
 *  需要注意的是，并集选择器中，最后一个元素后面不需要加 " ，"
 *  语法格式约定：并集选择器的元素之间，采用竖着写 的格式
 *  下列语法表示：同时选择 选择器1 和 选择器2

![0beabea04b03435f84a9d33cd0c5678e.png][]

####    **介绍：伪类选择器** ####

*  伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。 说人话就是 限定选择器触发的条件
 *  伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
 *  伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器

#### **链接伪类选择器** ####

作用：指定连接 默认、点击后、放置、点击时的样式

a:link 默认样式

a:visited 点击后的样式

a:hover 鼠标放在链接上的样式

a:active 鼠标点击时的样式

多个链接伪类选择器存在的时候，请务必遵守上述选择器定义的顺序： l v h a （LV 包包好 hao）

a 在浏览器中一般都具有默认样式，所以一般都需要单独给链接指定具体样式

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 链接：默认样式 */
            a:link {
                color:
                    black;
            }
    
            /* 链接： 鼠标点击之后的样式 */
            a:visited {
                color: gold;
            }
    
            /* 链接： 鼠标放在链接上的样式 */
            a:hover {
                color: green;
            }
    
            /* 链接： 鼠标点击时的样式 */
            a:active {
                color: blue;
            }
        </style>
    </head>
    
    <body>
        <a href="#">链接伪类选择器</a>
    </body>
    
    </html>

--------------------

#### **:focus伪类选择器** ####

作用：用于选取获得焦点的表单元素

焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说

![04acc2882cdb41afa36e938680f57683.png][]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            /* 把获取到了光标的input表单元素选取出来 并被设置为：2px的蓝色边框*/
            input:focus {
                border-color: blue;
                border: 2px;
            }
        </style>
    </head>
    
    <body>
        <form>
            <input type="text" />
        </form>
    </body>
    
    </html>

--------------------

#### 总结 复合选择器 ####

![3a878da9dc0d49f2944180b727c8f4f5.png][]

[c34954e342924a29b63e642a2aa02e32.png]: https://img-blog.csdnimg.cn/c34954e342924a29b63e642a2aa02e32.png
[bf68acc19121439f8eb149f37136b7b5.png]: https://img-blog.csdnimg.cn/bf68acc19121439f8eb149f37136b7b5.png
[e8f6c38824304fe7855e8f81ca885a2b.png]: https://img-blog.csdnimg.cn/e8f6c38824304fe7855e8f81ca885a2b.png
[73c1dc02b8f846d194279c2162180305.png]: https://img-blog.csdnimg.cn/73c1dc02b8f846d194279c2162180305.png
[149cb276085c4b709b9a05086df7840e.png]: https://img-blog.csdnimg.cn/149cb276085c4b709b9a05086df7840e.png
[bc70f76d82aa46e9b876788674bea435.png]: https://img-blog.csdnimg.cn/bc70f76d82aa46e9b876788674bea435.png
[42b78e1d42784dc399fb91e8a6ac4d10.png]: https://img-blog.csdnimg.cn/42b78e1d42784dc399fb91e8a6ac4d10.png
[b4493995ca7a466f9e5101c142d47eff.png]: https://img-blog.csdnimg.cn/b4493995ca7a466f9e5101c142d47eff.png
[0beabea04b03435f84a9d33cd0c5678e.png]: https://img-blog.csdnimg.cn/0beabea04b03435f84a9d33cd0c5678e.png
[04acc2882cdb41afa36e938680f57683.png]: https://img-blog.csdnimg.cn/04acc2882cdb41afa36e938680f57683.png
[3a878da9dc0d49f2944180b727c8f4f5.png]: https://img-blog.csdnimg.cn/3a878da9dc0d49f2944180b727c8f4f5.png