CSS中常用的选择器

zhenzhizz`

已于 2023-12-27 12:05:18 修改

阅读量81

点赞数

分类专栏：前端 javase 文章标签： css 前端开源软件工程 1024程序员节

于 2023-10-24 10:48:08 首次发布

本文链接：https://blog.csdn.net/m0_63191002/article/details/133915963

版权

javase 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

前端

3 篇文章 0 订阅

订阅专栏

文章目录

一、什么是CSS
二、什么是选择器？
三、基础选择器
四、复合选择器
五、前端资料查询工具

一、什么是CSS

CSS全称为Cascading style sheets，叫做层叠样式表。是一种用来为结构化文档（html文档、xml文档）添加样式（字体、颜色、间距等）的计算机语言。

二、什么是选择器？

选择器描述了要选中页面中的哪个标签，{ }里面的样式就是针对那些被选中的标签而生效。

三、基础选择器

3.1、标签选择器

标签选择器是写在style标签里的。格式是：标签名+{}。标签名是想要针对哪个标签进行样式改变，就写哪个标签名（html里含有的标签，可以是div标签、a标签、p标签…）。{ }里面可以写各种样式改变，例如字体大小、粗细、文字颜色、背景颜色…
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 标签选择器  */
    div{
        color: red;
        font-size: 50px;
    }
    p{
        color: green;
        font-size: 100px;
    }
</style>

<body>
    <div>
        JAVA
        JAVA
        JAVA
    </div>
     <div>
        黑小虎
        黑小虎
        黑小虎
    </div>
    
    <p>
        星黛露
        星黛露
        星黛露
    </p>
    <p>
        玲娜贝儿
        玲娜贝儿
        玲娜贝儿
    </p>
</body>
</html>

上述的例子中，有两个标签选择器，分别是
1、
  div{
    color: red;
    font-size: 50px;
}
2、
p{
    color: green;
    font-size: 100px;
}

这两个标签分别对p标签的文字颜色、文字大小，div标签的文字颜色、文字大小做出改变。

上述html代码的网页效果：在这里插入图片描述可以看到对应的元素都已经被修改了样式，同时可以知道，标签选择器对对应的所有的便签都起作用。例如上述html代码中含有几个div标签、p标签，则它们对应的代码都会被div、p 标签选择器里的代码改变样式。

3.2、类选择器

类选择器能够让相同的标签展示不一样的样式效果，并不像标签选择器一样会对对应的所有标签应用相同的样式效果。

类选择器的结构：.+选择器名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器中的 类选择器演示</title>
</head>

<style>
    /* 类选择器，选择特定的标签来进行属性的设置,独特性从类选择器这里展示*/
.one{
    color: blueviolet;
    font-size: 100px;
}
.Two{
    background-color: blue;
    color: black;
    font-size: 20px;
}

</style>

<body>
    <div class="one">你好</div>

    <div class="Two">再见</div>

    <div>早上好</div>
</body>
</html>

上述的.one 和.Two都是类选择器，他们的应用方式是：需要对哪个标签生效，就使用class属性引入类选择器的英文名字（切记此处的.不需要写，只需要写英文名字），此时这个类选择器只会对引用它的标签生效，不会对其他跟引用类选择器一样的标签生效。

上述html代码的网页效果：
在这里插入图片描述

3.3、id选择器

每个标签都有一个id属性，id的值应该在页面中是唯一的，使用id选择器来选中到对应的标签上。

id选择器的格式：#+选择器名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器中的id选择器演示</title>
</head>

<style>
    /* CSS选择器中的id选择器 */
#div-Id{
    color: blue;
    font-size: 60px;
}
#p-id{
    color: aqua;
    font-size: 100px;
}

</style>
<!-- html中每个元素都有一个id -->
<body>
    <div id="div-Id">
        咬人猫
        咬人猫 
        咬人猫
    </div>

    <p id = "p-id">
        水冰月
        水冰月
        水冰月
    </p>
</body>
</html>

上述的#div-Id和#p-id都是id选择器，他们的应用方式是：需要对哪个标签生效时，就通过标签的id属性引入id选择器即可。

上述html代码的网页效果：
在这里插入图片描述

3.4、通配符选择器

通配符选择器是能够选中页面中的所有元素，可以让页面所有元素都被选中，通常用于干掉浏览器的默认样式：文本、默认颜色，字体大小、默认的段落间距…

通配符选择器的格式是：*+{ }

四、复合选择器

复合选择器是把多个基础选择器给组合起来了。

4.1、后代选择器

后代选择器是指：在指定的元素里面去筛选后代元素。

<ul>
    <li> </li>
</ul>

ul 是 li 的父标签，li 是 ul 的子标签，所以 li 是 ul 的后代。

<ul>
    <li>
        <div>  </div>
    </li>
</ul>

ul 是 li 的父标签，li 是 ul 的子标签，li 是 ul 的父标签，div 是 li 的子标签，因此 div 也是 ul 的子标签（孙子标签）。

后代选择器的格式：标签1 标签2 (标签n){ }
标签1 标签2 标签n 可以是标签选择器，也可以是类选择器，也可以是id选择器。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复合选择器中的后代选择器演示</title>
</head>
<!-- 后代选择器 -->
<style>
  /* 先找到 ul 再找到ul里面所有的li  将li标签样式全部改变*/
  ul li {
    color: red;
  }
  
  ol li{
    color: blueviolet;
    font-size: larger;
  }
  
/* 搭配类选择器使用 ,这样写也是可以的！！*/
  .one li{
    color: purple;
    font-size: 90px;
    background-color:  azure;
  }

  /* 或者 .one div*/
  .one li div{
    color: green;
  }
</style>

<body>
  <ul>
    <li>咬人猫</li>
    <li>咬人猫</li>
    <li>咬人猫</li>
  </ul>

  <ol>
    <li>咬人猫</li>
    <li>咬人猫</li>
    <li>咬人猫</li>
  </ol>


  <ul class="one">
    <li>
      <div>hello world!</div>
    </li>
    <li>花花</li>
    <li>花花</li>
  </ul>
</body>

</html>

上述html代码中含有四个后代标签选择器：分别是ul li 、ol li 、.one li 、.one li div

上述的后代选择器ul li 是针对

咬人猫
咬人猫
咬人猫

代码里的所有 ul 标签里的 li 标签生效的。

后代选择器ol li 是针对

咬人猫
咬人猫
咬人猫

代码里的所有 il 标签生效的。

后代选择器 .one li 是针对

hello world!
花花
花花

代码里的所有 li 标签生效的。

后代选择器.one li div 是针对

hello world!
花花
花花

代码中的所有div标签生效的。

上述html代码中的网页效果：
在这里插入图片描述

4.2、子选择器

子选择器和后代选择器类似，只是子选择器无法选择孙子标签以及孙子之后的标签。

以下是一个子选择器：

<style>
ul > li{
color:red
}
</style>

子选择器则是使用 > 表示这是子元素的关系。上述代码就只是在 ul 的子元素范围内，搜索 li ,不会搜索 li 里面的孙子元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器中的子选择器</title>
    <!-- 只能选择子标签，无法选择子孙标签或者 孙子孙子辈标签 -->
</head>

<style>
    ul>li{
        color: rebeccapurple;
        font-size: 80px;
    }
    ul>div{
        color: aquamarine;
        font-size: 100px;
    }
</style>

<body>
    <ul>
        <li>
            <div>咬人猫</div>
        </li>
        <li>咬人猫</li>
        <li>咬人猫</li>
    </ul>
</body>
</html>

上述html代码中，有两个子选择器，分别是ul > li，ul > div 。这两个子选择器只有 ul > li 该选择器会生效，因为 li 是 ul 的子类，ul > div 该选择器不会生效，因为 div 是 ul 的孙子辈。

上述html代码的网页效果：
在这里插入图片描述

4.3、并集选择器

并集选择器是：针对多个不同的选择器，应用相同的样式属性。

并集选择器格式：标签1，标签2(标签之间通过，分隔开)，标签1，标签2…可以是标签选择器，也可以是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>
</head>

<!-- 并集选择器 -->
<style>
    div,p{
        color: brown;
        font-size: 80px;
    }

</style>

<body>
   <div>咬人猫</div>
   <div>咬人猫</div>
   <div>咬人猫</div>
   
   <p>水冰月</p>
   <p>水冰月</p>
   <p>水冰月</p>

</body>
</html>

上述html代码的网页效果：
在这里插入图片描述

4.4、伪类选择器

伪类选择器，是选中标签的不同状态。重点介绍两个基础伪类选择器：1、标签名：hover 鼠标放上去，标签状态发生改变。
2、标签名：active 点击后，标签状态发生改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

div{
    color: aqua;
    font-size: 90px;
}
/* 伪类选择器 */
div:hover{
    /* 鼠标一放上去就变化 */
    color: red;
    font-size: 20px;

}

/* 伪类选择器 */
div:active{
    /* 鼠标一按就变化 */
    color: blueviolet;
    font-size: 200px;
}

button{
    border: none;
    background-color: gray;
    color: white;
    width: 100px;
    height: 80px;
}

button:hover{
    background-color: red;
}

</style>

<body>
    <div>咬人猫</div>

    <button type="button">这是一个按钮</button>
</body>
</html>

上述html代码的网页效果：
原始状态：
在这里插入图片描述
鼠标停放在button标签上时，button标签发生变化：按钮变成红色。

五、前端资料查询工具

这三个网页都是帮助我们学习前端或者其他一些编程技术的网站，在上面可以学习到许多知识。

5.1、mdn

网址：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web

5.2、w3school

网址：https://www.w3school.com.cn/index.html

5.3、菜鸟教程

网址：https://www.runoob.com/

zhenzhizz`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS中常用的选择器

CSS全称为Cascading style sheets，叫做层叠样式表。是一种用来为结构化文档（html文档、xml文档）添加样式（字体、颜色、间距等）的计算机语言。选择器描述了要选中页面中的哪个标签，{ }里面的样式就是针对那些被选中的标签而生效。
复制链接

扫一扫

专栏目录