选择器汇总

已于 2022-10-29 00:52:39 修改
阅读量357 收藏 1
点赞数 1
分类专栏： Css 文章标签： 前端 html css
于 2022-10-28 23:50:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Celester_best/article/details/127580686
版权

目录

选择器类型

通用选择器

标签选择器

类选择器

id选择器

属性选择器

伪类选择器

伪元素选择器

示例汇总

关系选择器

后代选择器

相邻后代选择器

兄弟选择器

相邻兄弟选择器

选择器权重

权重分配

原则

选择器类型

通用选择器

通用选择器以*选择页面上的所有的 HTML 元素

* {
  text-align: center;
  line-height: 50px;
}

标签选择器

标签选择器根据标签名称来选择 HTML 元素。

p {
  color: red;
  width: 100px;
  height: 50px;
  border: 1px solid burlywood;
}

类选择器

类选择器选择有特定 class 属性的 HTML 元素。以.开始

.class-selector {
  width: 100px;
  height: 50px;
  background-color: aquamarine;
}

id选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。以#开始

#id-selector {
  margin-top: 10px;
  width: 100px;
  height: 50px;
  border: 1px solid gray;
}

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素，属性选择器包含[]

[title="properties-selector"] {
  margin-top: 10px;
  width: 100px;
  height: 50px;
  border: 1px solid goldenrod;
}

伪类选择器

伪类选择器一般指前面有个英文冒号(:)的选择器（可以理解为是一个类选择器，但是并没有在元素上添加class名称）

.fake-selector {
  margin-top: 10px;
  width: 100px;
  background-color: blueviolet;
}
/* 伪类选择器 */
.fake-selector:hover {
  background-color: red;
}

伪元素选择器

伪元素选择器有连续两个英文冒号的选择器（可以理解为是一个元素，但是又不会在html布局中显式呈现）

.fake-element-selector {
  margin-top: 10px;
  width: 100px;
  border: 1px solid brown;
}
/* 伪元素选择器 */
.fake-element-selector::after {
  width: 30px;
  height: 30px;
  content: "伪元素选择器";
  background-color: blue;
}

示例汇总

<template>
  <div class="selector-container">
    <!-- 标签选择器 -->
    <p>标签选择器</p>
    <!-- 类选择器 -->
    <div class="class-selector">类选择器</div>
    <!-- id选择器 -->
    <div id="id-selector">id选择器</div>
    <!-- 属性选择器 -->
    <div title="properties-selector">属性选择器</div>
    <!-- 伪类选择器 -->
    <div class="fake-selector">伪类选择器</div>
    <!-- 伪元素选择器 -->
    <div class="fake-element-selector">伪元素选择器</div>
  </div>
</template>
<script>
export default {
  name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
  margin: 10px;
}
/* 通用选择器 */
* {
  text-align: center;
  line-height: 50px;
}
/* 标签选择器 */
p {
  color: red;
  width: 100px;
  height: 50px;
  border: 1px solid burlywood;
}
/* 类选择器 */
.class-selector {
  width: 100px;
  height: 50px;
  background-color: aquamarine;
}
/* id选择器 */
#id-selector {
  margin-top: 10px;
  width: 100px;
  height: 50px;
  border: 1px solid gray;
}
/* 属性选择器 */
[title="properties-selector"] {
  margin-top: 10px;
  width: 100px;
  height: 50px;
  border: 1px solid goldenrod;
}

.fake-selector {
  margin-top: 10px;
  width: 100px;
  background-color: blueviolet;
}
/* 伪类选择器 */
.fake-selector:hover {
  background-color: red;
}

.fake-element-selector {
  margin-top: 10px;
  width: 100px;
  border: 1px solid brown;
}
/* 伪元素选择器 */
.fake-element-selector::after {
  width: 30px;
  height: 30px;
  content: "伪元素选择器";
  background-color: blue;
}
</style>

关系选择器

后代选择器

选择所有合乎规则的后代元素。空格连接

<template>
  <div class="selector-container">
    <div class="parent">
      <div class="child1">
        1
        <div class="child">1-1</div>
        <div>1-2</div>
        <div>1-3</div>
      </div>
      <div class="child">
        2
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
  margin: 10px;
}
.parent .child {
  color: blueviolet;
  font-size: 26px;
}
</style>

相邻后代选择器

只选择子元素，会忽略孙子、重孙子等元素，因此又称为“子选择器”，用>连接

<template>
  <div class="selector-container">
    <div class="parent">
      <div class="child1">
        1
        <div class="child">1-1</div>
        <div>1-2</div>
        <div>1-3</div>
      </div>
      <div class="child">
        2
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
  margin: 10px;
}
div {
  color: black;
  font-size: 16px;
}
.parent > .child {
  color: blueviolet;
  font-size: 26px;
}
</style>

兄弟选择器

选择当前元素后面的所有合乎规则的兄弟元素，用~连接。

注意是当前元素后面的元素，在当前元素前面的元素是不会被匹配的。

<template>
  <div class="selector-container">
    <div class="parent">
      <div class="child1">
        1
        <div>1-0</div>
        <div class="child">1-1</div>
        <div>1-2</div>
        <div>1-3</div>
      </div>
      <div class="child">
        2
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
      </div>
      <div class="child3">
        3
        <div>3-1</div>
        <div>3-2</div>
        <div>3-3</div>
      </div>
      <p>1111111</p>
      <div class="child">
        4
        <div>4-1</div>
        <div>4-2</div>
        <div>4-3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
  margin: 10px;
}
.child ~ div {
  color: blueviolet;
  font-size: 26px;
}
</style>

相邻兄弟选择器

仅仅选择当前元素相邻的那个合乎规则的兄弟元素，用+连接。

<template>
  <div class="selector-container">
    <div class="parent">
      <div class="child1">
        1
        <div>1-0</div>
        <div class="child">1-1</div>
        <div>1-2</div>
        <div>1-3</div>
      </div>
      <div class="child">
        2
        <div>2-1</div>
        <div>2-2</div>
        <div>2-3</div>
      </div>
      <div class="child3">
        3
        <div>3-1</div>
        <div>3-2</div>
        <div>3-3</div>
      </div>
      <p>1111111</p>
      <div class="child">
        4
        <div>4-1</div>
        <div>4-2</div>
        <div>4-3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectorDemo",
};
</script>
<style scoped>
.selector-container {
  margin: 10px;
}
.child + div {
  color: blueviolet;
  font-size: 26px;
}
</style>

选择器权重

权重分配

标签选择器权重：1

类选择器权重：10

id选择器权重：100

原则

1、权重可以累加

div p {
  color: aquamarine;
}

上面的选择器权重为2，因为div和p都是标签选择器，权重都为1，累加之后就是2

2、冲突时，选择权重打的样式

如果对同一个标签的样式设置有冲突，使用权重大的样式

3、权重的就近原则

如果一个标签上同时设置两个类选择器，而两个类选择器设置的样式有冲突，则哪个选择器最后定义则使用哪个。

就近原则是根据选择器定义的先后顺序，选择最后定义的。

Celester_best
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
FakeSelect:将 HTML 选择转换为 Bootstrap 按钮下拉菜单
06-23
假选择 将 HTML 选择转换为 Bootstrap 按钮下拉列表。 演示： :
模拟（美化）SELECT 控件
weixin_30410119的博客
10-20 107
SELECT 是常用的网页控件，对它进行模拟美化也是常做的效果，方法也多种多样。分析其主要功能有如下几点：1.点击出现下拉选框2.点击选项隐藏下拉选框 并设置相应的值3.鼠标离开后延迟收回（或者失去焦点时收回）就这几个功能，做了一个简单的SELECT 模拟的效果 点击查看DEMO；为了减少与其他模块冲突的机会，使用命名空间，只为全局增加一个变量 var fakeslt;具体代码如下，也可查看DEM...
select 宽度跟随option内容自适应
weixin_30296405的博客
11-15 2396
传统的select在没有设置固定宽度的情况，会因为自身的 option 选项的里，宽度最宽的option作为select本身的宽度 例如 可见效果为： select的宽度因为“宽度最宽的option作为select本身的宽度”导致select变宽 但是这跟我们想要的select宽度跟随option内容自适应，相违背 解决方案： 很普遍的，大家会选择用JS来控制select的宽度。大概是判断o...
mysql option长度_select 宽度跟随option内容自适应
weixin_34098296的博客
02-07 914
传统的select在没有设置固定宽度的情况，会因为自身的 option 选项的里，宽度最宽的option作为select本身的宽度例如可见效果为：select的宽度因为“宽度最宽的option作为select本身的宽度”导致select变宽但是这跟我们想要的select宽度跟随option内容自适应，相违背解决方案：很普遍的，大家会选择用JS来控制select的宽度。大概是判断option的内容长...
常用jQuery选择器汇总
12-08
jQuery选择器是JavaScript库jQuery的核心特性之一，极大地简化了DOM元素的选择和操作。在JavaScript中，获取元素通常依赖于`getElementsByTagName`、`getElementsByClassName`和`getElementById`这三个基本方法，而...
常见的jQuery选择器汇总
10-25
jQuery选择器是jQuery库的核心部分，它允许开发者高效地选取DOM元素，并进行一系列操作。本文将详细介绍jQuery中常见的选择器类型及其用法。 1. **基本元素选择器**： - `$("p")`：选取页面上所有的`<p>`元素。 -...
css关系选择器汇总共15页.pdf.zip
11-20
本压缩包文件“css关系选择器汇总共15页.pdf.zip”显然包含了对CSS关系选择器的全面概述，可能涵盖了15页的详细内容。虽然我们无法直接在此提供PDF文件的内容，但可以基于常见CSS关系选择器的知识点进行深入讲解。 ...
5.CSS学习（浮动）
ShawLee0925的博客
07-23 207
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 943
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 98
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 81
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 744
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 581
CTFWP，ctfshow-web42
前端性能优化--懒加载
weixin_43799793的博客
07-19 189
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
[web]-反序列化-绕过__wakeup(转)
mails2008的专栏
07-18 413
终点：很直接是echo $flag,在__destruct中，username==='admin' 和 password==100。反序列化过程中发现起点在终点之前调用，反而是捣乱的，那我们就不需要自动执行__wakeup，绕过的方法，设置的字段数量比实际字段大的值。其实简单的很简单，难得也很难，慢慢学习就好，没必要焦虑，觉得很难，纯粹一个兴趣爱好就行。起点：_wakeup函数中是$this->username='guest',是给赋值；按照常规思路，寻找起点、终点、跳板。
Web Pages 表单
07-20 303
Web pages 表单是现代网页设计中不可或缺的组成部分，它们允许用户与网站进行交互，提交信息，如注册、登录、反馈、预订等。表单的设计和功能对用户体验和网站的业务目标有着直接的影响。本文将深入探讨Web pages表单的各个方面，包括设计原则、常用元素、验证机制和最佳实践。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 240
thinkphp8图片上传的验证
Vue事件总线（EventBus）的概念、使用以及注意事项
最新发布
weixin_53216033的博客
07-23 447
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 1077
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值