CSS篇二：其他选择器与权重/范围

回夜

已于 2024-10-11 21:54:36 修改

阅读量799

点赞数 20

分类专栏：前端开发技术栈汇总 CSS知识集文章标签： css 前端

于 2024-10-11 10:57:15 首次发布

本文链接：https://blog.csdn.net/weixin_63022858/article/details/142844880

版权

前端开发技术栈汇总同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CSS知识集

5 篇文章 0 订阅

订阅专栏

一、其他选择器

简单聊聊：篇一提到的三种基础选择器其实并不能完全覆盖商业项目的开发场景，所以其他类型选择器的使用频率也非常高，所以还是建议记住，避免某一场景下为难。

1、通配选择器

简述：使用较少，优缺点都很明显，优→统一设置；缺→样式覆盖，降低代码执行效率。

推荐度：一星

2、组合选择器

简述：有五种常用的组合形式，在特定场景下或许有用。

推荐度：三星

①、子代选择器

使用（>符号）

div>p {
  color: red;
}

②、后代选择器

使用（空格分隔）

div p {
  color: red;
}

③、相邻兄弟选择器

使用（+符号）

（介：相邻兄弟可以理解为亲兄弟，拥有同一父级）

h1 + p {
  margin-top: 20px;
}

④、通用兄弟选择器

使用（~符号）

（介：通用兄弟可以理解为堂兄弟，拥有同一祖父级）

h1 ~ p {
  color: green;
}

⑤、分组选择器

使用（逗号分隔）

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

3、伪类选择器

简述：伪类选择的种类很多，通常都是以（E：）形式展现（E代表标签名称/标签id名/标签class名等），同样是在特殊场景下进行使用。

推荐度：三星

①、动态伪类选择器

/* 未访问的链接 */
a:link {
  color: blue;
}

/* 访问过的链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停链接 */
a:hover {
  color: red;
}

/* 元素被点击时的链接 */
a:active {
  color: yellow;
}

/* 元素获取焦点时的链接 */
a:focus {
  color: yellow;
}

②、结构伪类选择器

/* 子元素选择器 */

a:first-child {
  /* 选择每个父元素的第一个a元素 */
}

a:last-child {
  /* 选择每个父元素的最后一个a元素 */
}

a:nth-child(n) {
  /* 选择每个父元素的第n个a元素，n可以是数字、关键字或公式 */
}


/* 类型选择器 */

a:first-of-type {
  /* 选择每个父元素下同类型a元素的第一个 */
}

a:last-of-type {
  /* 选择每个父元素下同类型a元素的最后一个 */
}

a:nth-of-type(n) {
  /* 选择每个父元素下同类型a元素的第n个，n同上 */
}


/* 唯一子元素选择器 */

a:only-child {
  /* 选择每个父元素下唯一的a元素 */
}

a:only-of-type {
  /* 选择每个父元素下同类型中唯一的a元素 */
}


/* 空元素选择器 */

a:empty {
  /* 选择没有子元素的a元素 */
}

③、否定伪类选择器

/* 否定伪类 */
div:not(p) {
  color: purple; /* 选择div中所有非p元素，并将其颜色设置为紫色 */
}

④、状态伪类选择器

（注意：动态伪类选择其实也归属于状态伪类选择器，只是为了方便记忆，所以区分拿出。）


/* 元素启用/禁用状态 */

input:enabled {
  /* 选择每个启用的 <input> 元素 */
}

input:disabled {
  /* 选择每个禁用的 <input> 元素 */
}


/* 表单元素状态 */

input:checked {
  /* 选择每个被选中的 <input> 元素（仅用于单选按钮和复选框） */
}

select:default {
  /* 选择默认选项（例如，在<select>元素中预先选定的选项） */
}

input:read-only {
  /* 选择只读属性的元素 */
}

input:read-write {
  /* 选择没有只读属性的元素 */
}

input:required {
  /* 选择设置了"required"属性的元素 */
}

input:optional {
  /* 选择没有设置"required"属性的元素 */
}

input:valid {
  /* 选择所有验证正确的元素 */
}

input:invalid {
  /* 选择所有验证错误的元素 */
}

⑤、目标伪类选择器

（注意：这是唯一一个目标伪类选择器，如果你的URL是http://example.com/#section2，那么:target选择器将会匹配ID为section2的元素。你可以使用这个选择器来为当前活动的目标元素设置特定的样式）

使用度不高，了解即可！

:target {
  /* 选择当前活动的目标元素（即URL中#后面的部分所指向的元素） */
}

4、属性选择器

简述：属性选择器顾名思义，针对标签/元素的属性进行筛选，然后指定样式，使用范围度较小。

推荐度：两星

/* 存在性选择器 */
p[attr] {
  /* 选择所有具有attr属性的p元素 */
}

/* 等于选择器 */
p[attr="value"] {
  /* 选择所有attr属性等于"value"的p元素 */
}

/* 不等于选择器 */
p[attr!="value"] {
  /* 选择所有attr属性不等于"value"的p元素 */
}

/* 开头选择器 */
p[attr="value"] {
  /* 选择所有attr属性值以"value"开头的p元素 */
}

/* 结尾选择器 */
p[attr$="value"] {
  /* 选择所有attr属性值以"value"结尾的p元素 */
}

/* 包含选择器 */
p[attr*="value"] {
  /* 选择所有attr属性值中包含"value"的p元素 */
}

/* 特定选择符选择器 */
p[attr|="value"] {
  /* 选择所有attr属性值是一个完整单词，且以"value"开头的p元素 */
}