css 选择器小技巧

丝绒拿铁有点甜
149 阅读3分钟

本文主要通过一些简单习题，学习css选择器的一些小技巧。

要求：选中箭头指向的元素

一、 :not

用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中 image.png

p:not(.foo)

image.png

li:nth-child(2n+1):not(:first-child)
/* 或者 */
li:nth-child(2n + 3)

注意：

  • :not() 伪类不能被嵌套，这意味着 :not(:not(...)) 是无效的
  • 由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作。
/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 既不是 <div> 也不是 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 类名不是 `.crazy` 或 `.fancy` 的元素 */
/* 注意，此语法尚未获广泛支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

二、选择父元素下的任意子元素(*)

image.png

div>*

三、属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素

MDN传送门

image.png

span[data-item]

属性选择器语法：

  • [attr]：表示带有以 attr 命名的属性的元素。

    /* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

  • [attr=value]:表示带有以 attr 命名的属性，且属性值为 value 的元素。

  • [attr~=value]:表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

  • [attr|=value]：表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符)。

  • [attr^=value]：表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

    /* 以 "#" 开头的页面本地链接 */
a[href^="#"] {
  background-color: gold;
}

  • [attr$=value]：表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

  • [attr*=value]：表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

    /* 包含 "example" 的链接 */
a[href*="example"] {
  background-color: silver;
}

  • [attr operator value i]：表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

四、通用兄弟选择器 (~)

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

image.png

p ~ span

五、元素的激活(:enabled)与禁用:disabled

image.png

*:enabled

:enabled 表示任何被启用的（enabled）元素。传送门

input:enabled {
  color: #2b2;
}

input:disabled {
  color: #aaa;
}

六、:is

image.png

:is(#one,#two,#five,#six,#nine)

首先讲讲选择器列表

CSS 选择器列表（,），常被称为并集选择器或并集组合器，选择所有能被列表中的任意一个选择器选中的节点。

/* 选择所有 <span> 和 <div> 元素 */
span, div {
  border: red 2px solid;
}

但是会出现选择器列表无效化的情况，比如：

h1 { font-family: sans-serif }
h2:maybe-unsupported { font-family: sans-serif }
h3 { font-family: sans-serif }

h1, h2:maybe-unsupported, h3 { font-family: sans-serif }

以上两段 CSS 代码并不不等价，这是因为，在选择器列表中如果有一个选择器不被支持，那么整条规则都会失效。 解决这个问题的一个方法是使用 :is() 选择器，它会忽视它的参数列表中失效的选择器，但是由于 :is()  会影响优先级的计算方式，这么做的代价是，其中的所有选择器都会拥有相同的优先级。

:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }

选择器优先级

详细说明可参考MDN相关文档

下面列表中，选择器类型的优先级是递减的：

  1. !important
  2. 内联样式
  3. ID选择器（例如：#example）
  4. 类选择器（例如：.example），属性选择器（例如，[type="radio"]），伪类例如，:hover）
  5. 标签选择器（例如，h1）和伪元素（例如，::before）
  6. 通配符选择器*、关系选择器（+,>,~）和否定伪类（:not()）,（但是，在 :not() 内部声明的选择器会影响优先级）
avatar
文章
阅读
粉丝