2025-04-14

眼前一亮的CSS选择器

# 1. :is()、:where()伪类函数以选择器列表作为参数，并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用

header p:hover,
main p:hover,
footer p:hover {
  color: red;
}

/* 上面的代码简写为： */
:is(header, main, footer) p:hover {
  color: red;
}

:is()和:where()的用法和作用是很相似的，唯一不同的在于，:where() 的优先级总是为 0，但是 :is() 的优先级是由它的选择器列表中优先级最高的选择器决定的

# 2. :not() CSS 伪类用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 类名不是 `.fancy` 的 <p> 元素*/
p:not(.fancy) {
  color: green;
}

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

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

/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo) {
  color: red;
}

# 3. :only-child CSS 伪类表示没有任何兄弟元素的元素。这与 :first-child、:last-child 或 :nth-child(1)、:nth-last-child(1) 相同，但前者具有更小的权重性。

<ol>
  <li>今天天气晴朗，是个敲代码的好日子</li>
</ol>

<ol>
  <li>今天天气晴朗，是个敲代码的好日子</li>
  <li>但是写了很多bug.</li>
  <li>这很让我头疼.</li>
</ol>

//第一个ol的li生效
li:only-child {
  color: fuchsia;
}

# 4. :root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示‘html’元素，除了优先级更高之外，与 html 选择器相同。

:root {
  --main-bg-color: lightgreen;
}
.main {
  background: var(--main-bg-color);
}

# 5. :empty CSS 伪类用于选择不包含任何子元素的元素。

<!-- 子元素可以是元素节点或文本（包括空格）。但是注释、处理指令和 CSS content 不会影响元素是否被认定为空。 -->
<p>下面的节点没有内容</p>
<div></div>

<p>下面的节点有内容</p>
<div>
  <p>123456</p>
</div>

<p>下面的节点有注释</p>
<div><!-- 这里是注释 --></div>

<p>下面的节点有空格</p>
<div></div>

<p>下面的节点有空的标签</p>
<div>
  <p></p>
</div>

div:empty { outline: 2px solid deeppink; height: 1em; width: 100px; }

# 6. :invalid 是 CSS 伪类选择器

<!-- 用来选择任何未通过验证的<form>、<fieldset>、<input>或其他表单元素 -->
<form>
  <label for="form-name">姓名</label>
  <input type="text" name="name" id="form-name" required />
  <button type="submit">提交</button>
</form>

form:invalid > button { opacity: 0.3; pointer-events: none; }

# 7. 伪类

a:not(main *:not(:is(h2, h3) > *)) {
  color: red;
}
a:not(main *)：选择不是 <main> 标签下的所有 a 标签
main *:not(:is(h2, h3) > *)：选择 <main> 标签下所有不是 <h2>、<h3> 子元素的元素

所以合起来就是：选择所有不是 <main> 标签下的 <a> 标签以及所有 <main> 下面不是 <h2>、<h3> 下的子 <a> 以外的所有 <a> 标签。

# 8 css 相关

1：css 伪类 https://juejin.cn/post/6844904181304655886?utm_source=gold_browser_extension

2：css 画不规则形状 https://juejin.im/post/5ed657e6f265da76dd3dd4c3?utm_source=gold_browser_extension

3：垂直水平居中（9 种） https://segmentfault.com/a/1190000016389031#item-7

4：css 文字特效 https://juejin.im/post/5efab10ff265da22e610d2d0?utm_source=gold_browser_extension

5：波浪效果和时间轴+三角形信息框 https://juejin.im/post/5f047bee6fb9a07ea55f02d7?utm_source=gold_browser_extension#heading-2

6：grid 布局 https://juejin.im/post/5f1e70315188252e937c088b?utm_source=gold_browser_extension#heading-21

7：css3 按钮动画 https://emilkowalski.github.io/css-effects-snippets/

8：八种让人眼前一亮的 HOVER 效果 https://juejin.im/post/6861501624993447950?utm_source=gold_browser_extension

9：drop-shadow 可用于 png/svg 图片变色，用于底部导航图标激活颜色 http://willless.com/how-to-change-the-color-of-svg-introduced-by-img.html

上次更新: 2025-12-04