首页 前端知识 CSS中的常见选择器

CSS中的常见选择器

2024-03-15 10:03:29 前端知识 前端哥 671 692 我要收藏

🌹作者主页:青花锁 🌹简介:Java领域优质创作者🏆、Java微服务架构公号作者😄

🌹简历模板、学习资料、面试题库、技术互助

🌹文末获取联系方式 📝

在这里插入图片描述


往期热门专栏回顾

专栏描述
Java项目实战介绍Java组件安装、使用;手写框架等
Aws服务器实战Aws Linux服务器上操作nginx、git、JDK、Vue
Java微服务实战Java 微服务实战,Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
Java基础篇Java基础闲聊,已出HashMap、String、StringBuffer等源码分析,JVM分析,持续更新中
Springboot篇从创建Springboot项目,到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
Spring MVC篇从创建Spring MVC项目,到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
华为云服务器实战华为云Linux服务器上操作nginx、git、JDK、Vue等,以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
Java爬虫通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
Vue实战讲解Vue3的安装、环境配置,基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
Spring讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等

前言

      本文介绍了CSS中的常见选择器,选择器的出现可以让我们实现对具体的元素标签进行定制,因此我们要掌握好各类选择器的使用。

1、选择器介绍

      在CSS(层叠样式表)中,选择器是一种用于选择 HTML 元素以应用特定样式的模式或规则。选择器通过匹配 HTML 元素的不同属性、关系或状态来确定要应用样式的目标元素。

      CSS选择器的作用是根据选择器的匹配规则,选择出目标元素,并对其应用指定的样式。选择器可以根据元素的标签名、类名、ID、属性、状态等进行选择。

1.1、元素选择器

      元素选择器(Element Selector)是CSS中最基本和最常见的选择器。它使用HTML元素的标签名作为选择器,用于选择匹配标签名的所有元素。

      元素选择器的语法非常简单,只需在CSS中使用标签名作为选择器即可。例如,要选择所有的段落元素,可以使用p作为选择器。

1.1.1、标签选择器

      使用HTML标签名作为选择器,选择匹配标签名的所有元素。例如,p选择所有的段落元素,h1选择所有的一级标题元素。

p {
  background-color: yellow;
}

1.1.2、通配符选择器

使用*作为选择器,匹配所有的元素。例如,*选择所有的元素。

* {
  background-color: yellow;
}

1.1.3、类型选择器

使用元素的特定类型作为选择器,选择匹配指定类型的元素。例如,input选择所有的输入框元素,a选择所有的锚点元素。

input {
  background-color: yellow;
}

      选择器非常灵活,可以用于选择单个元素或多个匹配的元素,并针对其应用相应的样式。可以通过组合元素选择器和其他选择器来实现更具体和精确的选择。

      需要注意的是,元素选择器会选择所有匹配的元素,因此在使用时要确保选择器的准确性和误用的风险。

1.2、类选择器

类选择器(Class Selector)是CSS中一种常用的选择器,用于选择具有相同类名的元素。它以点.开头,后面跟着类名。
类选择器的语法如下:

.classname {
  /* CSS属性和值 */
}

      其中,点.表示类选择器,后面紧跟着类名(可以是任何有效的CSS类名)。在HTML中,当一个元素的class属性值与类选择器匹配时,该元素就会应用类选择器中定义的样式。

      以下是一个具体的示例,假设我们有一些HTML元素使用了相同的类名highlight,我们可以通过类选择器来为它们设置样式:

.highlight {
  background-color: yellow;
  color: red;
}

      上述代码将选择所有类名为highlight的元素,并设置它们的背景颜色为黄色,文本颜色为红色。
需要注意的是,类选择器可以重复使用,一个元素可以拥有多个类名。这样可以更灵活地为元素应用不同的样式。例如:

<div class="highlight bold">这是一个示例文本</div>

      上述代码中的div元素同时具有highlightbold两个类名,可以分别通过.highlight.bold类选择器来为其设置样式。

2、ID选择器

      ID选择器(ID Selector)是CSS中一种常用的选择器,用于通过元素的唯一标识符选择特定的元素。它以井号#开头,后面跟着ID名称。

ID选择器的语法如下:

#idname {
  /* CSS属性和值 */
}

      其中,井号#表示ID选择器,后面紧跟着ID名称(可以是任何有效的CSS ID名称)。在HTML中,当一个元素的id属性值与ID选择器匹配时,该元素就会应用ID选择器中定义的样式。

      需要注意的是,ID在整个HTML文档中应该是唯一的,即每个元素只能有一个ID,并且ID不能以数字开头。因为ID具有唯一性,所以使用ID选择器可以精确地选择页面上的特定元素。

以下是一个具体的示例,假设我们有一个具有唯一ID的<div>元素:

<div id="mydiv">这是一个示例文本</div>

我们可以使用ID选择器来为其设置样式:

#mydiv {
  background-color: yellow;
  color: red;
}

      上述代码将选择具有ID为mydiv<div>元素,并设置其背景颜色为黄色,文本颜色为红色。

      需要注意的是:ID选择器具有更高的优先级,如果同时使用类选择器和ID选择器来选择相同的元素,ID选择器的样式将覆盖类选择器的样式。因此,应谨慎使用ID选择器,以确保样式的准确应用。

3、交集选择器

      交集选择器(Intersection Selector)是CSS中一种选择器,用于选择同时具有多个类名的元素。它使用类选择器的语法,并将多个类名连在一起,中间没有任何符号。

交集选择器的语法如下:

.class1.class2 {
  /* CSS属性和值 */
}

      .class1.class2表示类选择器,通过这种组合的方式,选择具有同时包含类名.class1.class2的元素。这样可以在不修改HTML结构的情况下,针对特定的元素应用样式。

      以下是一个具体的示例,假设我们有一个HTML中的<div>元素,同时具有类名.highlight.bold

<div class="highlight bold">这是一个示例文本</div>

我们可以使用交集选择器来为它设置样式:

.highlight.bold {
  font-weight: bold;
  color: red;
}

      上述代码将选择同时具有.highlight.bold类名的<div>元素,并设置其字体加粗和字体颜色为红色。

      需要注意的是,交集选择器要求元素同时具有所有选择器中指定的类名,只有在两个类名同时存在时才会应用样式。如果两个类名分别位于不同的元素上,则不会匹配。这种方式有助于更加精确地选择元素,并为其应用特定的样式。

4、并集选择器

      并集选择器(Union Selector)是CSS中一种选择器,用于同时选择多个元素或选择多个类名或ID的元素。它使用逗号(,)将多个选择器或类名/ID名连接在一起。

并集选择器的语法如下:

selector1, selector2 {
  /* CSS属性和值 */
}

      selector1selector2表示选择器,通过逗号分隔,将多个选择器组合在一起。这样可以同时选择多个元素,并为它们应用相同的样式。

4.1、并集选择器选择多个元素

h1, h2, h3 {
  color: blue;
  font-weight: bold;
}

      上述代码将选择页面上的所有<h1><h2><h3>元素,并设置它们的字体颜色为蓝色、字体加粗。

4.2、并集选择器选择多个类名

.highlight, .bold {
  background-color: yellow;
  color: red;
}

      上述代码将选择所有具有.highlight类名和所有具有.bold类名的元素,并设置它们的背景颜色为黄色,文本颜色为红色。

4.3. 并集选择器选择多个ID

#mydiv, #mysection {
  border: 1px solid black;
  padding: 10px;
}

      上述代码将选择具有ID为mydiv和具有ID为mysection的元素,并设置它们的边框为1px实线黑色,内边距为10px。
      需要注意的是,并集选择器可以组合不同类型的选择器,如标签选择器、类选择器、ID选择器等,以便同时选择不同类型的元素并应用相同的样式。使用并集选择器可以减少代码重复,并为多个元素一次性应用相同的样式。

5、后代选择器

      后代选择器(Descendant Selector)是CSS中一种选择器,用于选择元素的后代元素,即在某个元素内部的子孙元素。它使用空格()将两个选择器连接在一起。

后代选择器的语法如下:

selector1 selector2 {
  /* CSS属性和值 */
}

      selector1selector2表示选择器,通过空格将它们连接在一起。选择器1选择了父元素(祖先元素),而选择器2选择了后代元素(子孙元素)。这样可以根据元素的层级关系来选择并应用样式。
以下是一个具体的例子,我们有一个HTML结构

<div class="container">
  <h1>标题</h1>
  <p>这是一个段落</p>
</div>

我们可以使用后代选择器来选择<div>元素内部的<h1>元素并设置样式

.container h1 {
  color: blue;
}

      上述代码将选择具有.container类名的<div>元素内部的<h1>元素,并将其文字颜色设置为蓝色。

      需要注意的是,后代选择器会匹配所有符合条件的后代元素,无论它们的层级有多深。选择器2可以是任何有效的CSS选择器,可以是标签选择器、类选择器、ID选择器等。

      后代选择器的优势在于它可以非常灵活地选择元素的特定后代,而不受层级的限制。通过合理运用后代选择器,可以准确地选择并应用样式于所需的元素。

6、子代选择器

      子代选择器(Child Selector)是CSS中一种选择器,用于选择元素的直接子元素(子节点),即在某个父元素下的直接子元素。它使用大于号(>)将两个选择器连接在一起。

子代选择器的语法如下

selector1 > selector2 {
  /* CSS属性和值 */
}

      selector1selector2表示选择器,通过大于号连接在一起。选择器1选择了父元素,而选择器2选择了父元素的直接子元素。这样可以选择并应用样式于父元素的直接子元素,而不会选择孙子元素及更深层级的后代元素。

以下是一个具体的例子,我们有一个HTML结构:

<div class="container">
  <div>
    <div>
      <h1>
        标题
      </h1>
    </div>
  </div>
  <div>
    <p>这是一个段落</p>
  </div>
  <h1>11111111</h1>
  <p>这是一个段落</p>
</div>
.container > p {
    color: blue;
}

上述代码将选择.container元素下所有的第一代后代<p>元素,并将它们的文字颜色设置为蓝色。

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

我们可以使用子代选择器来选择<ul>元素下直接的<li>元素并设置样式

ul > li {
  color: red;
}

      上述代码将选择<ul>元素下直接的<li>元素,并将它们的文字颜色设置为红色。

      需要注意的是,子代选择器只选择父元素的直接子元素,不包括更深层级的后代元素。选择器2可以是任何有效的CSS选择器,可以是标签选择器、类选择器、ID选择器等。

      子代选择器在一些特定的布局需求下非常有用,可以在层级结构中精确选择特定的子元素,并为其应用样式。同时,子代选择器的使用还能够提高CSS选择器的性能,因为它的范围被限制在了直接子元素上。

7、兄弟选择器

      兄弟选择器(Sibling Selector)是CSS中一种选择器,用于选择元素的兄弟元素,即与某个元素拥有相同父元素的其他元素。它使用加号(+)将两个选择器连接在一起。

兄弟选择器的语法如下:

selector1 + selector2 {
  /* CSS属性和值 */
}

      其中,selector1selector2表示选择器,通过加号连接在一起。选择器1选择了某个元素,而选择器2选择了与选择器1拥有相同父元素的下一个兄弟元素。这样可以选择并应用样式于兄弟元素。

以下是一个具体的例子,我们有一个HTML结构

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

ul li:first-child + li {
  color: blue;
}

      上述代码将选择<ul>元素下第一个<li>元素的兄弟元素(第二个和第三个<li>元素),并将它们的文字颜色设置为蓝色。

      需要注意的是,兄弟选择器只会匹配在相同父元素下的下一个兄弟元素,不会匹配更远的兄弟元素。选择器2可以是任何有效的CSS选择器,例如标签选择器、类选择器、ID选择器等。

      兄弟选择器在一些特定的布局需求下非常有用,可以选择特定元素的下一个兄弟元素并为其应用样式。通过使用兄弟选择器,可以在不使用额外的类名或ID的情况下,精确选择并应用样式于特定的兄弟元素。

8、属性选择器

      属性选择器(Attribute Selector)是CSS中一种用于选择具有指定属性的元素的选择器。属性选择器允许根据元素的属性及其属性值来选择并应用样式。

属性选择器有以下三种常见的语法形式:

    1. 存在和值属性选择器:
      [attribute]:选择具有指定属性的元素。
      [attribute=value]:选择属性值与指定值完全匹配的元素。
    1. 部分值属性选择器:
      [attribute^=value]:选择属性值以指定值开头的元素。
      [attribute$=value]:选择属性值以指定值结尾的元素。
      [attribute*=value]:选择属性值包含指定值的元素。
    1. 精确值和多值属性选择器:
      [attribute|=value]:选择属性值与指定值完全匹配或以指定值及连字符开头的元素。
      [attribute~=value]:选择属性值中包含指定值作为一个单词(空格分隔)的元素。
      [attribute*=value]:选择属性值与指定值完全匹配或以指定值及空格开头的元素。

以下是一些具体的例子,说明如何使用属性选择器:

/* 选择所有有href属性的元素 */
[href] {
  color: blue;
}
 
/* 选择class属性值为"button"的元素 */
[class="button"] {
  background-color: yellow;
}
 
/* 选择src属性值以".jpg"结尾的元素 */
[src$=".jpg"] {
  border: 1px solid black;
}
 
/* 选择class属性值包含"active"的元素 */
[class*="active"] {
  font-weight: bold;
}

      使用属性选择器,可以根据元素的属性及其属性值来选择元素,从而实现对元素的样式控制。属性选择器提供了一种灵活的方式来选择元素,使得样式可以根据元素的属性动态变化或特定条件下应用。


资料获取,更多粉丝福利,关注下方公众号获取

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3800.html
标签
css选择器
评论
会员中心 联系我 留言建议 回顶部
复制成功!