【web前端开发】CSS最常用的11种选择器

川长思鸟来 2023-09-27 15:26 87阅读 0赞

#### 文章目录 ####

*  1.CSS介绍
 *  2.CSS的语言规则
 *  3.CSS的引入方式
 *  4.选择器
 *   *  4.1 标签选择器
     *  4.2 类选择器
     *  4.3 id选择器
     *  4.4 通配符选择器
     *  4.5 复合选择器
     *   *  4.5.1 后代选择器
         *  4.5.2 子代选择器
     *  4.6 并集选择器
     *  4.7 交集选择器
     *  4.8 伪类选择器
     *   *  4.8.1 hover伪类选择器
         *  4.8.2 active伪类选择器
     *  4.9 伪类选择器
 *  5. 结语

## 1.CSS介绍 ##

> CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。

`CSS的作用:给HTML里面的标签设置样式`  
简单点来说就是让HTML的页面变得更加好看

## 2.CSS的语言规则 ##

*  CSS是写在 style 标签里面的,而style标签一般写在head标签里面,title标签的下面

## 3.CSS的引入方式 ##

CSS共有三种引入方式,分别是`内嵌式,外联式和行内式`

> 内嵌式: CSS写在style标签中  
> 注意:style标签可以写在页面的`任意位置`,但一般都会在head标签里面

> 外联式: CSS写在单独的.css文件里面  
> `要通过link标签在网页中导入`

> 行内式: CSS写在标签的style属性中  
> 一般搭配js来使用

## 4.选择器 ##

### 4.1 标签选择器 ###

> 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式

**语法**:

标签名 {
          CSS属性名: 属性值
          CSS属性名: 属性值
          ...
        }

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        p {
          
          color: blue;
        }
      </style>
    </head>
    <body>
      <p>这是一个段落</p>
      <p>这是一个段落</p>
      <div>这是一个段落</div>
    </body>
    </html>

效果:  
![在这里插入图片描述][7d94d6b54da1463b8c14d1e55669be2f.png]

> 作用: 通过标签名,找到页面中所有这类标签,并设置样式

注意:

*  标签选择器选择的是一类标签,而不是单独一个
 *  标签选择器无论嵌套关系有多深,都能找到对应的标签

### 4.2 类选择器 ###

> 标签选择器是选择这一类标签并设置样式,而`类选择是可以给单独的一个标签设置样式`

**语法**:

.类名 {
          CSS属性名: 属性值
          CSS属性名: 属性值
          ...
        }

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        .one {
          
          color: red;
        }
        .two {
          
          font-size: 30px;
        }
      </style>
    </head>
    <body>
      <p class="one">这是一个段落</p> 
      <p class="one two">这是一个段落</p>
      <p>这是一个段落</p>
    </body>
    </html>

效果:  
![在这里插入图片描述][8d408f38223c466eb6e8cb579d5fa099.png]

注意点:

*  所有的标签都有class这个属性,class属性的`属性值就是类名`
 *  类名不能以数字或中横线 - 作为开头
 *  `一个标签可以有多个类名,类名之间要用空格隔开`  
    \-`类名可以重复,一个类选择器可以同时选中多个标签`

### 4.3 id选择器 ###

> `id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。`

语法:

#id属性值 {
    	CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        #nav {
          
          color: blue;
        }
      </style>
    </head>
    <body>
      <p id="nav">这是一个段落</p>
      <p>这是一个段落</p>
    </body>
    </html>

效果:  
![在这里插入图片描述][d3eb121920684269b5bc9da014d6fd1d.png]

注意:

*  所有的标签都有id这个属性
 *  id是唯一的,不能重复!
 *  `id选择器只能被调用一次`
 *  id选择器通常搭配js来使用

`类选择器与id选择器的区别`

*  `类选择器可以被多个标签调用`
 *  `id选择器只能被调用一次`

### 4.4 通配符选择器 ###

> 找到文中所有的标签,并设置样式

语法:

* {
      CSS属性名: 属性值
      CSS属性名: 属性值
      ...
    }

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        * {
          
          color: blue;
        }
      </style>
    </head>
    <body>
      <p>CSS</p>
      <span>CSS</span>
      <div>CSS</div>
      <h1>CSS</h1>
    </body>
    </html>

效果:  
![在这里插入图片描述][1183f2acba0a48738a91f5f3f4d51167.png]  
因为通配符选择器会改变所有标签的样式,在实际开发使用中用的很少

### 4.5 复合选择器 ###

复合选择器中有 后代选择器和子代选择器

#### 4.5.1 后代选择器 ####

> `作用:根据HTML标签的嵌套关系,选择父元素"后代中"所有满足条件的标签`

语法:

选择器1 选择器2{
        CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

`效果:在选择器1中找到标签的后代(儿子,孙子,重孙子...)中,找到满足选择器2的标签,并设置样式`

*  `选择器和选择器之间用空格隔开`
 *  `只要是后代(儿子,孙子,重孙子...)就会被选中`

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div p{
          
              color: #f00;
            }
        </style>
    </head>
    <body>
    <div>
        <p>这是一个段落</p>
        <span>
            <p>这也是一个段落</p>
        </span>
        <h4>这是一个小标题</h4>
    </div>
    </body>
    </html>

效果:  
![在这里插入图片描述][e425500d6fcb4ae2b17c9de3ba86513d.png]

#### 4.5.2 子代选择器 ####

> `作用:根据HTML标签的嵌套关系,选择父元素"子代中"所有满足条件的标签`

语法:

选择器1>选择器2{
        CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

`效果:在选择器1中找到标签的子代中,找到满足选择器2的标签,并设置样式`

*  `这里的子代是只有儿子`
 *  `选择器与选择器之间用 > 隔开`

示例

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div > p{
          
                color: blue;
            }
        </style>
    </head>
    <body>
    <div>
        <p>这是一个段落</p>
        <span>
            <p>这也是一个段落</p>
        </span>
    </div>
    </body>
    </html>

效果:  
![在这里插入图片描述][963138b47ceb4feaa9939afead9e2738.png]

### 4.6 并集选择器 ###

> `作用:同时选择多组标签,并设置样式`

语法:

选择器1,选择器2,...{
        CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

`效果:找到选择器1和选择器2所选中的标签,并设置样式`

*  `选择器和选择器中间用 , 隔开`
 *  `选择器可以有多个`

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one {
          
                font-size: 50px;
            }
            div,
            .one,
            span{
          
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>这是一个div</div>
        <p class="one">这是一个段落</p>
        <span>这是一个span标签</span>
    </body>
    </html>

效果:  
![在这里插入图片描述][55c650be90ff48b39a0a2459bcf72980.png]

### 4.7 交集选择器 ###

> `作用:找到 HTML中同时满足选择器的标签`

语法:

选择器1选择器2...{
    	CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

`效果:找到 包含上述选择器的标签,并设置样式`

*  `选择器可以有多个`

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .one {
          
                color: blue;
            }
            .two {
          
                font-style: italic;
            }
            p.one.two{
          
                font-size: 30px;
            }     
        </style>
    </head>
    <body>
        <div class="one">这是一个div</div>
        <p class="one two">这是一个p标签</p>
        <span>这是一个span标签</span>
    </body>
    </html>

效果:  
![在这里插入图片描述][a1f8c13f4b8343cf8bf42e95f6ab5306.png]

### 4.8 伪类选择器 ###

> 伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态

#### 4.8.1 hover伪类选择器 ####

> `作用:将鼠标悬停在元素上,并设置样式`

语法:

选择器:hover {
    	CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

`效果:鼠标悬停在设置的元素时,会出现样式`

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
          a:hover{
          
            color: red;
          }
        </style>
    </head>
    <body>
    <a href="#">这是一个超链接</a>
    <br>
    <a href="#">这也是一个超链接</a>
    </body>
    </html>

效果:  
我这里鼠标其实是悬浮在第二个标签上的,但是截图的时候不显示的鼠标了  
![在这里插入图片描述][d667205081f44473be17265298e4119d.png]

*  `任何一个元素都可以悬停,都可以设置样式`

#### 4.8.2 active伪类选择器 ####

> `作用:将鼠标点击元素时,并设置样式`

语法:

选择器:avtive {
    	CSS属性名: 属性值
        CSS属性名: 属性值
        ...
    }

示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
          p:active{
          
              color: skyblue;
          }
        </style>
    </head>
    <body>
    <p>这是一个段落</p>
    <p>这是一个段落</p>
    </body>
    </html>

![在这里插入图片描述][8e19478f57fe4d12a03859131ec6c5ad.png]

### 4.9 伪类选择器 ###

> 作用:根据HTML的结构关系查找元素

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>E:first-child{ }</td> 
   <td>找到父元素中第一个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:last-child{}</td> 
   <td>找到父元素中最后一个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:first-child(n){ }</td> 
   <td>找到父元素第n个子元素E</td> 
  </tr> 
  <tr> 
   <td>E:last-child(n){}</td> 
   <td>找到父元素中倒数第n个子元素E</td> 
  </tr> 
 </tbody> 
</table>

注:**E是元素的英文单词element 的首字母 E ，就是元素/标签的意思**

## 5. 结语 ##

选择器在前端开发中还是很常用的  
`实践为主,理论为辅` 建议大家可以自己去尝试着使用一下

> 感谢你的观看!希望这篇文章能帮到你!  
> web前端开发专栏在不断更新中,欢迎订阅!  
> “愿与君共勉,携手共进!”  
> ![在这里插入图片描述][8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]

[7d94d6b54da1463b8c14d1e55669be2f.png]: https://img-blog.csdnimg.cn/7d94d6b54da1463b8c14d1e55669be2f.png
[8d408f38223c466eb6e8cb579d5fa099.png]: https://img-blog.csdnimg.cn/8d408f38223c466eb6e8cb579d5fa099.png
[d3eb121920684269b5bc9da014d6fd1d.png]: https://img-blog.csdnimg.cn/d3eb121920684269b5bc9da014d6fd1d.png
[1183f2acba0a48738a91f5f3f4d51167.png]: https://img-blog.csdnimg.cn/1183f2acba0a48738a91f5f3f4d51167.png
[e425500d6fcb4ae2b17c9de3ba86513d.png]: https://img-blog.csdnimg.cn/e425500d6fcb4ae2b17c9de3ba86513d.png
[963138b47ceb4feaa9939afead9e2738.png]: https://img-blog.csdnimg.cn/963138b47ceb4feaa9939afead9e2738.png
[55c650be90ff48b39a0a2459bcf72980.png]: https://img-blog.csdnimg.cn/55c650be90ff48b39a0a2459bcf72980.png
[a1f8c13f4b8343cf8bf42e95f6ab5306.png]: https://img-blog.csdnimg.cn/a1f8c13f4b8343cf8bf42e95f6ab5306.png
[d667205081f44473be17265298e4119d.png]: https://img-blog.csdnimg.cn/d667205081f44473be17265298e4119d.png
[8e19478f57fe4d12a03859131ec6c5ad.png]: https://img-blog.csdnimg.cn/8e19478f57fe4d12a03859131ec6c5ad.png
[8fbf2a7f2d0e4db782e58035677a303d.png_pic_center]: https://img-blog.csdnimg.cn/8fbf2a7f2d0e4db782e58035677a303d.png#pic_center