【前端】CSS常用选择器总结

选择器

前言

选择器优先级

继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

直接上代码

js 复制代码
<template>
  <div>
    <exitButton />
    <h3 class="mt-2">下面UnoCss的使用---------------------------------------</h3>
    <p class="w-125 bg-pink h-25 text-5 rounded-full">直接类里就是样式,原子化Css确实不错</p>
    <p class="h-[10px] mt-[30px]">指定高度和margin-top,配合vs插件 WindiCSS IntelliSense使用,看我其他文章介绍</p>
    <p class="text-[20px] mt-4">文本20大小,不指定则X4,比如mt-4就是margin-top:16px</p>
    <br />
    <el-button type="success">深度选择器使用有 >>> ::v-deep /deep/ :deep()</el-button>
    <br />
    <h3 class="mt-2">回顾一下其他选择器的使用---------------------------------------</h3>
    <span>标签选择器aqua</span>
    <div class="cls">
      类选择器blueviolet
      <span>类子代,如果span有声明颜色则使用申明的,否则继承cls颜色aqua</span>
    </div>
    <div id="id1">id选择器red</div>
    <hr />
    <h3 class="mt-2">复合选择器的使用---------------------------------------</h3>
    <div class="clsF">
      <p class="children1">
        子代选择器 和 后代选择器
        <span>
          你干嘛1
          <span>
            你干嘛2
            <span>你干嘛3</span>
          </span>
        </span>
      </p>
      <p class="clsB1">并集选择器1</p>
      <p class="clsB2">并集选择器2</p>
      <p class="clsB1 clsJ2 clsJ1">交集选择器</p>
      <p class="hoverT">伪类选择器</p>
    </div>
    <input type="text" />
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
[type='text'] {
  //属性选择器还可以[type]、[type^=a]、[title$=a] 解释:包含这个属性以属性值a开头、以a结尾
  color: blue;
}

.clsF > p:first-child {
  //结构伪类选择器第一个
  color: skyblue !important;
}
.clsF > p:nth-child(2n) {
  //结构伪类选择器2的倍数
  color: red !important;
}
.clsF > p:last-child {
  //结构伪类选择器最后一个
  color: skyblue !important;
}


.hoverT:hover {
  //伪类选择器鼠标放上文字变红
  color: crimson;
}
.clsJ2.clsJ1 {
  //交集选择器,拥有并1的样式和自己的样式覆盖1,如果自己样式几个不用空格同级别
  font-weight: 600;
  background: green;
}
.clsJ2 {
  background: gray !important; //优先级最高
}
.clsB2,
.clsB1 {
  //并集选择器,都有
  background: pink;
}
.clsF > .children1 {
  //子代选择器
  font-weight: 800;
}

.clsF span {
  //后代选择器
  color: chartreuse;
}
span {
  //标签选择器
  color: aqua;
}
.cls {
  //类型选择器
  color: blueviolet;
}
#id1 {
  //id选择器
  color: red;
}
* {
  //通配符选择器 所有标签
  font-size: 20px;
}
:deep(.el-button > span) {
  //深度选择器
  color: pink;
}
</style>

深度选择器

升级vue2项目到vue3时候发现

shell 复制代码
 the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

这是因为项目使用的 css 扩展语言是 dart-sass,不支持 /deep/ (less/node-sass)和 >>>(css) 的写法,小括号里是扩展语言。 用:deep()代替或者::v-deep

深度选择器一般作用于第三方的组件里的样式,比如element-ui,如下有scoped的情况不加深度选择器则无法修改span里的颜色

css 复制代码
<style lang="scss" scoped>
::v-deep(.el-button > span) {
  color: green;
}
</style>

:deep(.el-button > span) {
  color: green;
}

总结:使用

js 复制代码
::v-deep |  :deep()
相关推荐
孤水寒月3 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀3 小时前
html初学者第一天
前端·html
耶啵奶膘6 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689977 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽8 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头8 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全9 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试