CSS选择器

最新推荐文章于 2021-10-18 18:19:35 发布

落魄三无青年

最新推荐文章于 2021-10-18 18:19:35 发布

阅读量378

点赞数 1

分类专栏：前端学习文章标签： css

本文链接：https://blog.csdn.net/weixin_45858192/article/details/109174765

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS选择器

文章目录

- CSS选择器

什么是css选择器

css选择器的作用是按照css规则定位HTML页面的一个或多个元素。浏览器在解析HTML页面时，会根据css规则中的选择器定位HTML页面的元素，并为对应的元素设定样式。
通过css选择器可以实现对HTML元素的，一对一，一对多和多对一的定位。

css选择器分类

css从第一版本发展到第三版本，导致css选择器的种类越来越复杂。目前css选择器分类具体如下：

基本选择器：共有5个基本选择器，是css选择器最为基本的用法。
层级选择器：共有4个层级选择器，是根据HTML元素之间的关系来定位HTML元素。
组合选择器：具有交集和并集两种用法，是将之前基本选择器和层级选择器进行组合。
伪类选择器：允许未包含在HTML页面中的状态信息选择定位HTML元素。
伪类选折起：定位所有未被包含HTML的实体。

基本选择器

元素选择器
元素选择器是通过HTML，页面的元素名称来设置css样式，具体语法如下：

元素名称{
		属性名：属性值；
}

示例代码：

p{
	color: red;
}

类选择器
类选择器就是通过HTML元素的class属性值来设置css样式。具体语法如下：

.className{
      属性名: 属性值;
    }

示例代码：

.myDiv{
      color: aquamarine;
    }

类选择器命名规则
ID选择器
ID选择器就是通过HTML元素的id属性值来设置css样式。具体语法如下：

#id{
      属性名: 属性值;
    }

示例代码：

#view1{
      color: aquamarine;
    }

在这里插入图片描述
通配符选择器
css2引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个（*）。该选择器可以与任何元素匹配，就像是一个通配符。

*{
      属性名：属性值;
    }

示例代码：

*{
      color: aquamarine;
    }

注意：通配符选择器的性能并不好。
在这里插入图片描述
属性选择器
是通过属性名或属性名和属性值来匹配HTML元素来添加样式

[属性名]{
      属性名：属性值;
    }
[属性名=属性值]{
      属性名：属性值;
    }

示例代码：

[name]{
      color: aquamarine;
    }
[name=title]{
     color: aquamarine;
 	}

在这里插入图片描述

选择器的优先级别

css的优先级可以判断当一个HTML元素设定有多个css样式时，哪些css样式属性的值对应HTML元素。css优先级是基于不同选择器来组成的定位规则，优先级的计算方式如下：

优先级就是分配给指定的css声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。
当优先级多个css声明中的任意一个声明的优先级相同的时候，css中最后一个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。

选择器类型的权重
css分配给每一种选择器类型的权重分值，如下列表所示：

通配符选择器的优先级为 0
类型(元素)选择器的优先级为 1
类选择器和属性选择器的优先级为 10
ID选择器的优先级是 100
内联样式的优先级为 1000

!important 例外规则
在使用!important规则的话，会覆盖掉所有其他选择器的声明样式。虽然!important规则与选择器类型的权重无关，但!important规则会直接影响css样式的最终现实效果，所以!important一定要谨慎使用。

不建议使用!important规则的建议：

一定要优先考虑使用样式规则的优先级来解决问题而不是!important。
只有在需要覆盖全站或外部css的特定页面使用!important。
永远不要在你的插件中使用!important。
永远不要在全站范围的css代码中使用!important。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择器优先级别</title>
  <style>
    /* 选择器的优先级别是从上到下 */
    *{
      color: aqua !important;
    }
    h1{
      color: aquamarine;
    }
    [class]{
      color: cornflowerblue;
    }
    .cls{
      color: blue;
    }
    /* 类选择器和属性选择器的优先级别相同，谁在后面谁有效 */
    /* [class]{
      color: cornflowerblue;
    } */
    #h1{
      color: purple;
    }
  </style>
</head>
<body>
  <h1 id="h1" class="cls" style="color: plum;">19级启嘉班</h1>
</body>
</html>

层级选择器

css层级选择器是根据HTML元素之间的关系而提供的选择器用法，使用层级选择器时应该先清楚的HTML之间的关系。

父子关系
兄弟关系
祖先后代关系

层级选择器种类

后代选择器
子级选择器
相邻兄弟选择器
普通兄弟选择器

后代选择器

语法结构如下：

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

语法说名：

选择器1表示某个祖先元素。
选择器2表示选择器1中指定的后代元素
连接符用空格表示在选择器1与选择器2之间

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
    /* 
      定位的是.ancestor的后代div元素
      后代选择器包含了该元素中的所有元素
     */
    .ancestor div{
      color: aqua;
    }
  </style>
</head>
<body>
  <div class="ancestor">
    这是ancestor
    <div class="parent">
      这是parent
      <div class="child">这是child</div>
    </div>
  </div>
</body>
</html>

子级选择器
在使用子级选择器时，使用css样式属性标记HTML元素部分属性会继承到其子类的后代中，需要通过开发者工具进行抓取判断。
语法结构如下：

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

语法说明：

选择器1表示某个父级选择器
选择器2表示选择器1中指定的子级元素
连接符用>表示在选择器1和选择器2之间

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子级选择器</title>
  <style>
    /* 
      定位的是.ancestor的子级为div的元素
     */
    .ancestor{
      width: 500px;
      height: 300px;
    }
    .parent{
      width: 300px;
      height: 200px;
    }
    .child{
      width: 200px;
      height: 100px;
    }
    .ancestor>div{
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="ancestor">
    这是ancestor
    <div class="parent">
      这是parent
      <div class="child">这是child</div>
    </div>
  </div>
</body>
</html>

相邻兄弟选择器
相邻兄弟元素具有相同的父级，且选择器只能通过前一个元素选中后面的兄弟元素。
语法结构如下：

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

语法说明：

选择器1表示某个目标元素
选择器2表示与选择器1有相同的父级的下一个元素。
连接符用+表示在选择器1和选择器2之间

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相邻兄弟选择器</title>
  <style>
    /* 
      定位的是.child1的后一个相邻div的元素
     */
    .child1+div{
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="ancestor">
    这是ancestor
    <div class="parent">
      这是parent
      <div class="child0">这是child0</div>
      <div class="child1">这是child1</div>
      <div class="child2">这是child2</div>
    </div>
  </div>
</body>
</html>

普通兄弟选择器
普通兄弟都有相同的父级，且可以选中与目标元素有相同父级元素，之后的任意元素。
语法结构：

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

语法说明：

选择器1表示某个目标元素
选择器2表示与选择器1有相同父级元素之后的任意元素
连接符用~表示在选择器1和选择器2之间

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>普通兄弟选择器</title>
  <style>
    /* 
      定位的是.child1的后的div的元素
     */
    .child1~div{
      background-color: cadetblue;
    }
  </style>
</head>
<body>
  <div class="ancestor">
    这是ancestor
    <div class="parent">
      这是parent
      <div class="child0">这是child0</div>
      <div class="child1">这是child1</div>
      <div class="child2">这是child2</div>
      <div class="child3">这是child3</div>
    </div>
  </div>
</body>
</html>

组合选择器

组合选择器就是将css选择器综合在一起的用法。
分为两类：

组合(并集)选择器
组合(交集)选择器

并集选择器
并集选择器是将不同选择器的相同css声明合并在一起，从而减少代码冗余。
语法结构：

选择器1，选择器2，>……{
		属性：属性值；
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
    /* h1{
      color: aqua;
    }
    h2{
      color: aqua;
    }
    h3{
      color: aqua;
    }
    h4{
      color: aqua;
    }
    h5{
      color: aqua;
    }
    h6{
      color: aqua;
    } */
    /* 通过并集选择器进行改写 */
    h1,h2,h3,h4,h5,h6{
      color: aqua;
    }
  </style>
</head>
<body>
  <h1>我是标题一</h1>
  <h2>我是标题二</h2>
  <h3>我是标题三</h3>
  <h4>我是标题四</h4>
  <h5>我是标题五</h5>
  <h6>我是标题六</h6>
</body>
</html>

交集选择器
使用选择器对HTML元素进行第一次筛选，再使用第二个选择器对第一次筛选出的结果进行第二次筛选。
语法结构：

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

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器</title>
  <style>
    p{
      color: aqua;
    }
    .cf{
      color: blueviolet;
    }
    p.cf{
      color: rgb(255, 115, 0);
    }
  </style>
</head>
<body>
  <p>早饭</p>
  <p class="cf">午饭</p>
  <p>晚饭</p>
  <div class="cf">吃饭</div>
</body>
</html>

伪类选择器

什么是伪类选择器
伪类选择器是一种允许通过未包含在HTML元素的状态信息定位HTML元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字，表示定位HTML元素的状态信息。
语法结构：

选择器:伪类{
	属性 : 属性值;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪类选择器</title>
  <style>
    /* 
      伪类选择器：
      * 概念：用来表示定位元素的某种状态所显示的样式
      * 语法：:关键字，例如:hover
     */
    button:hover{
      background-color: aqua;
    }
  </style>
</head>
<body>
  <button>按钮</button>
</body>
</html>

伪类选择器的数量这么多，为了更好的梳理伪类选择器，我们可以按照用途的不同分为如下5种类型：

动态伪类选择器：常于<a>元素配合使用，用来表示用户的某种行为状态。
目标为类选择器：常于<a>元素配合使用，用来定位当前HTML页面中唯一一个目标元素。
元素状态伪类选择器：常与表单组件元素配合使用，用来表示表单组件的某种状态。
结构伪类选择器：常与<table>元素配合使用，利用HTML元素之间的关系定位目标元素。
否定伪类选择器：用来定位与指定选择器不匹配的HTML元素。

否定伪类选择器
语法结构如下：

:not(selector){
	属性：属性值;
}

否定伪类选择器的作用就是用来定位不匹配selector选择器定位的HTML元素的元素。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>否定伪类选择器</title>
  <style>
    .fancy{
      text-shadow: 2px 2px 3px gold;
    }
    p:not(.fancy){
      color: greenyellow;
    }
    body :not(p){
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <p>你拉着我一起看雨，大雨里百鬼夜行。</p>
  <p class="fancy">我们混在其中，比鬼还高兴。</p>
  <div>李诞</div>
</body>
</html>

注意：

可以利用这个伪类提高规定的优先级。例如，#foo:not(#bar)和#foo会匹配相同的元素。但是前者的优先级更高。
:not(foo)将匹配任何非foo元素，包括html和body元素。
这个选择器只会应用在一个元素上，你无法用它排除所有父亲元素。
:not()伪类选择器里面是不能写多个，里面使用交集组合选择器。但是:not()是可以写多个的。

伪元素选择器

什么是伪元素选择器
css中伪元素选择器的用法与伪类选择器的用法类似，都是在指定css选择器增加关键字。但这两者的作用并不相同，伪类选择器是用来描述某个指定元素的状态信息，而伪元素选择器是用来描述某个指定元素的特定部分设定样式。

例如 ::first-line 伪元素可改变段落首行文字的样式，如下示例代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>伪元素选择器</title>
  <style>
    /* 表示p元素第一行 */
    p::first-line{
      color: aqua;
    }
    .p2 span{
      color: aquamarine;
    }
  </style>
</head>
<body>
  <p class="p1">派大星<br>
    海绵宝宝
  </p>
  <p class="p2"><span>章鱼哥</span><br>
    蟹老板
  </p>
</body>
</html>

::before和::after伪元素
::before伪元素的作用是作为定位的HTML元素的第一个子级对象，::after伪元素的作用是作为定位的HTML元素最后一个子级元素。
::before伪元素用法：

a::before{
	content:"❤";
}

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>before和after伪元素</title>
  <style>
    p::before{
      content: "❤";
    }
    p::after{
      content: "❤";
    }
  </style>
</head>
<body>
  <p>独留我，孤单在湖面~成双</p>
</body>
</html>

内容生成
content属性用于在元素的::berfore伪元素和::after伪元素中插入内容。该属性具有的值如下所示：

none：不会产生伪类元素。
normal：::berfore伪元素和::after伪元素中会被视为none。
text：文本内容。
url：格式为url(),指定一个外部资源(比如图片)。如果该资源或图片不能显示，它就会被忽略或显示一些占位。

::first-letter伪元素
元素的用法：

p::first-letter{
	font-size: 130%;
}

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>before和after伪元素</title>
  <style>
    p::first-letter{
      color: aquamarine;
    }
  </style>
</head>
<body>
  <p>人生得一知己足矣，斯世当以同怀视之。——鲁迅</p>
</body>
</html>

::selection 伪元素
::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容（比如使用鼠标或其他选择设备选中的部分）设置高亮效果。如下示例代码展示了::selection 伪元素的用法：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>selection 伪元素</title>
  <style>
    p::selection{
      background-color: aquamarine;
      color: rgb(246, 8, 8);
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
    Veniam magnam eius iure aperiam! Corporis incidunt veniam sit vero perferendis deserunt, 
    doloribus minima esse quam nesciunt dolores accusantium delectus quo ipsum!</p>
</body>
</html>

只有一小部分 CSS 属性可以用于::selection 伪元素：

color 属性
background-color 属性
cursor 属性
caret-color 属性
outline 属性
text-decoration 属性
text-emphasis-color 属性
text-shadow 属性

落魄三无青年

关注

1
点赞
踩
0

收藏

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

CSS选择器什么是css选择器css选择器的作用是按照css规则定位HTML页面的一个或多个元素。浏览器在解析HTML页面时，会根据css规则中的选择器定位HTML页面的元素，并为对应的元素设定样式。通过css选择器可以实现对HTML元素的，一对一，一对多和多对一的定位。css选择器分类css从第一版本发展到第三版本，导致css选择器的种类越来越复杂。目前css选择器分类具体如下：基本选择器：共有5个基本选择器，是css选择器最为基本的用法。层级选择器：共有4个层级选择器，是根据HTML元素
复制链接

扫一扫