当前位置：首页 > article >正文

CSS 系列之：选择器

article 2025/3/3 14:14:42

选择器优先级

内联 > ID选择器 > 类选择器、属性、伪类 > 标签选择器、伪元素

内联

内联就是在标签上写style

ID选择器

#className {...}

类选择器

.className {...}

标签选择器

div {...}
p {...}

并集选择器

<div class="className1"></div>
<div class="className2"></div>

<style>
// 相当于"和"的意思，选中 className1 和 className2
.className1, .className2 {
	.....
}
</style>

交集选择器

<div class="className1 className2"></div>

<style>
// 相当于"且"
.className1.className2 {
        .....
}
</style>

属性选择器

[attribute] 选择带有 attribute 属性的元素
[attribute=value] 选择所有使用 attribute=value 的元素
[attribute~=value] 选择 attribute 属性值包含 value 的元素
[attribute*=value] 选择 attribute 属性值包含 value 的所有元素
[attribute|=value] 选择 attribute 属性值以 value 开头的元素
[attribute^=value] 选择 attribute 属性值开头为 value 的所有元素
[attribute$=value] 选择 attribute 属性值结尾为 value 的所有元素

attribute不仅仅是 id、class，还可以是 name、type、title、target、href 等等…

举例：

<body>
  <div title="java">Java</div>
  <div class="example">这是一个示例</div>
  <div class="example-lang">这也是一个示例</div>
  <div class="another-example">这不是一个示例</div>
</body>

<style>
[title="java"] {
    color: green;
}

/* 属性选择器 [attribute|=value] */
[class|=example] {
    color: red;
}

/* 属性选择器 [attribute^=value] */
[class^=example] {
    background-color: yellow;
}
</style>

[attribute|=value] 和 [attribute^=value] 的区别：

[attribute|=value] 可以同 attribute 值等于 value，或 attribute 值以 value 开头且后面只能跟 “-” 字符的情况匹配
[attribute^=value] 可以同 attribute 值等于 value，或 attribute 值以 value 开头后面跟任意字符串的情况匹配
[attribute^=value] 包含 [attribute|=value]

子代选择器 (>)

选择某个元素的所有第一级子元素。第二、三级等非子元素的无效。

<template>
  <div class="box">
    <h1>
      举例：
      <p>子1</p>
      <p>子2</p>
      <em>
        <p>孙1</p>
      </em>
    </h1>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
h1 > p {
  color: red;
}
</style>

在这里插入图片描述

后代和子代的区别

后代是 空格 符号 h1 p {...}，子代是 > 符号 h1 > p {...}
后代选择儿子、孙子、曾孙等等，子代只选择儿子

兄弟选择器 (～、+)

普通兄弟选择器 (~)

普通兄弟选择器使用“～”来链接前后两个选择器。查找某一个指定元素的后面的所有兄弟结点。

<template>
  <div class="box">
　  <h2>《赠汪伦》</h2> <!-- 前面就不行 -->
　  <p>李白乘舟将欲行，</p>
　  <h2>忽闻岸上踏歌声。</h2> <!-- 后面就可以 -->
　  <div>桃花潭水深千尺，</div>
　  <h2>不及汪伦送我情。</h2> <!-- 隔一个也行 -->
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
p ~ h2 {
  color: red;
}
</style>

在这里插入图片描述

临近兄弟选择器 (+)

该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。该选择器只设置第二个元素的样式。

<template>
  <div class="box">
　  <h2>《赠汪伦》</h2>
　  <p>李白乘舟将欲行，</p>
　  <h2>忽闻岸上踏歌声。</h2> <!-- 紧挨着就行 -->
　  <h2>桃花潭水深千尺，</h2> <!-- 隔着就不行 -->
　  <p>不及汪伦送我情。</p>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
p + h2 {
  color: red;
}
</style>

在这里插入图片描述

通配选择器

* {
    .....
}

* {
    all: unset; // 去掉所有样式属性
}

伪类选择器

:root 选择器

用于匹配文档根元素，在 HTML 中，根元素始终是 html 元素。也就是说使用 :root 选择器定义的样式，对所有页面元素都生效。

:not 选择器

如果对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用 :not 选择器。

注意：:not 选择器只能选中子代，不能选中孙子。

<template>
  <div class="box">
    <div class="text">
      <div>《赠汪伦》</div>
      <div>李白乘舟将欲行，</div>
      <h2>忽闻岸上踏歌声。</h2>
      <div>桃花潭水深千尺，</div>
      <div>
        不及汪伦送我情。
        <h2>李白</h2> <!-- 孙子不行 -->
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
.text :not(h2) {
  color: red;
}
</style>

在这里插入图片描述

.text :not(h2) 也可以写成 .text *:not(h2) 注意中间的空格必不可少

:only-child 选择器

:only-child 选择器用于匹配属于某父元素的唯一子元素的元素，也就是说，如果某个父元素仅有一个子元素，则使用 :only-child 选择器可以选择这个子元素。

<template>
  <div class="box">
    国内电影： 　
    <ul>
      <li>一代宗师</li>
      <li>叶问</li>
      <li>非诚勿扰</li>
    </ul>
    美国电影： 　
    <ul>
      <li>侏罗纪世界</li>
    </ul>
    日本动漫： 　
    <ul>
      <li>蜡笔小新</li>
      <li>火影忍者</li>
      <li>航海王</li>
    </ul>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
li:only-child {color: red;}
</style>

在这里插入图片描述

:first-child 和 :last-child 选择器

:first-child 选择器和 :last-child 选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。

<template>
  <div class="box">
    电影： 　
    <ul>
      <li>一代宗师</li>
      <li>叶问</li>
      <li>非诚勿扰</li>
      <li>侏罗纪世界</li>
    </ul>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
li:first-child {color: red;}
li:last-child {color: blue;}
</style>

在这里插入图片描述

这里要注意：你选择的是父元素中的第一个或者最后一个子元素，而不是你筛选过后的第一个或最后一个子元素。

<template>
    <view class="table">
        <view class="title">
                标题
        </view>
        <view v-for="item in 10" class="content">内容</view>
        <view class="end">
                结尾
        </view>
    </view>
</template>

<style lang="scss">
.table {
    .content {
        height: 20px;
        border-bottom: 1px solid #000;
        &:last-child {
            border-bottom: 0px;
            color: red;
        }
    }
}
</style>

就例如这种情况，&:last-child 中的内容不会生效，因为 .content 不是父元素的最后一个子元素，最后一个子元素是 .end

:nth-child(n) 和 :nth-last-child(n) 选择器

直接举例：

/*选择第2个*/
li:nth-child(2) {color: red;} 

/*选择倒数第2个*/
li:nth-last-child(2) {color: blue;} 

/* 选择所有偶数行的 li */
li:nth-child(2n) {
    background-clolr: #0f0
}
li:nth-child(even) {
    background-clolr: #0f0
}

/* 选择所有奇数行的 li */
li:nth-child(2n+1) {
    background-clolr: #0f0
}
li:nth-child(odd) {
    background-clolr: #0f0
}

/* 选择第5个和5个以后的所有 li */
li:nth-child(n+5) {
    background-clolr: #0f0
}

:empty 选择器

:empty 选择器用来选择没有子元素或文本内容为空的所有元素。

<template>
  <div class="box">
    <p>传智播客北京校区</p>
    <p>传智播客上海校区</p>
    <p>传智播客广州校区</p>
    <p></p>
    <p>传智播客武汉校区</p>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
p {
  width: 200px;
  height: 20px;
  background-color: #fff;
}
.box :empty {
  background-color: red;
}
</style>

在这里插入图片描述

:target 选择器

:target 选择器用于为页面中的某个 target 元素（该元素的 id 被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到 target 元素后 :target 选择器所设置的样式才会起作用。

<template>
  <div class="box">
    <h1>这是标题</h1>
    <p><a href="#news1">跳转至内容 1</a></p>
    <p><a href="#news2">跳转至内容 2</a></p>
    <p>请单击上面的链接，:target 选择器会突出显示当前活动的HTML锚。</p>
    <p id="news1"><b>内容 1...</b></p>
    <p id="news2"><b>内容 2...</b></p>
  </div>
</template>

<style lang="less" scoped>
.box {
  margin: 100px;
}
:target {
  background-color: #e5eecc;
}
#news1, #news2 {
  height: 400px;
}
</style>

当单击【跳转到内容1】时，所链接到的内容将会被添加背景颜色效果。效果如下：

在这里插入图片描述

target 的用法：

<a href="https://www.baidu.com" target="_self">链接</a>

target 的属性值

值	描述
_self	默认值。在当前窗口打开
_blank	新窗口打开
_parent	在父框架集中打开
_top	在整个窗口中打开
framename	在指定的框架中打开
id	跳转到当前页面的指定id的位置

:link 选择未被访问的链接

:visited 选取已被访问的链接

:active 选择活动链接

:hover 鼠标指针浮动在上面的元素

:focus 选择具有焦点的

:enabled 选择启用的元素

:disabled 选择被禁用元素

:checked 选择选中的元素

<template>
  <div class="box">
    <div>
      <label for="">别名：</label>
      <input type="text" disabled />
    </div>
    <div>
      <label for="">年龄：</label>
      <input type="text" />
    </div>
    <div>
      <label for="">密码：</label>
      <input type="password" />
    </div>
    <div>
      <label for="">性别：</label>
      <input type="radio" name="sex" value="1" /><span>男</span>
      <input type="radio" name="sex" value="0" /><span>女</span>
    </div>
    <div>
      <label for="">爱好：</label>
      <input type="checkbox" name="aihao" value="1" /><span>看书</span>
      <input type="checkbox" name="aihao" value="2" /><span>旅游</span>
      <input type="checkbox" name="aihao" value="3" /><span>跑步</span>
      <input type="checkbox" name="aihao" value="4" /><span>学习</span>
    </div>
  </div>
</template>

<style scoped>
.box {
  margin: 100px;
}
.box input[type="text"]:disabled {
  background-color: yellow;
}
.box input[type="text"]:enabled {
  background-color: blue;
}
.box input:enabled {
  background-color: red;
}
.box input:checked + span {
  color: green;
}
</style>

在这里插入图片描述

伪元素选择器

::before 选择器

::before 伪元素选择器用于在被选元素的内容前面插入内容，必须配合 content 属性来指定要插入的具体内容。其基本语法格式为：

<元素>::before{
    content: 文字或 url();
}

在上述语法中，被选元素位于 ::before 之前，{} 中的 content 属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。

<template>
  <div class="box">
    <p>伪元素选择器</p>
  </div>
</template>
    
<style lang="less" scoped>
.box {
  margin: 100px;
}
p::before {
  content: '内容';
  color: red;
  font-size: 22px;
}
</style>

在这里插入图片描述

::after选择器

::after 伪元素选择器用于在某个元素之后插入一些内容，使用方法与 ::before选择器相同。

<template>
  <div class="box">
    <p>伪元素选择器</p>
  </div>
</template>

<style lang="less" scoped>
.box {
  margin: 100px;
}
p::after {
  content: url(~@/assets/logo.png);
}
</style>