CSS学习笔记｜MDN-CSS选择器

记录在MDN学习CSS中的一些个人笔记。

选择器种类

通配选择器

或叫全局选择器。选中所有元素。

* {}

标签、类、ID选择器

标签选择器。选择所有的 h1 元素

h1 { }

类选择器。选择类名有 box 的元素

.box { }

ID选择器。选择 ID 为 aid 的元素

#aid { }

标签+类/ID，选择含有指定类/ID的某标签元素。

选择类名为 aclass 的 h1 元素。

选择 ID 名为 aid 的 h1 元素。

h1.aclass { }
h1#aid { }

标签属性选择器

存在title属性的 a 标签元素

a[title] { }

存在href属性且为 xxx 的 a 标签元素

a[href="xxx"] {}

更多

• MDN-属性选择器

• MDN-属性选择器

伪类与伪元素选择器

伪类选择器， :hover 当鼠标悬浮与 a 上时样式。

a:hover { }

伪元素选择器，选择元素的某一个部分。 ::first-line 选择元素的第一行。

p::first-line { }

伪元素之 ::before ::after

常与 content 用于在选中的元素前后插入内容。

但通常不插入文字，如果插入文字为何不直接写在元素自身呢？且对于一些屏幕阅读器来说是不可见的，因此一般用于插入图标/符号。或者设置空字符串，利用 CSS 绘制外观。如：

<p>这是一个段落</p>

p::before {
  content: "✅";
}
p::after {
  content: "❤️这是after";
}

效果

更多

• MDN-伪类和伪元素

• CSS3选择器:nth-child和:nth-of-type之间的差异

• 伪类选择器

• 伪元素选择器

关系选择器/运算符

组合起来，作为更复杂的选择器。, > , + , ~

后代选择器

选择 .bt 匹配的元素下的所有 p 元素，无论是子还是孙。

.bt p { } 

子代关系选择器

选择 .bt 匹配的元素下的直接子元素的 p 元素。

.bt > p { }

相邻兄弟选择器

选择紧跟在 p 元素后的 img 元素，而不是 p 元素和 img 元素一起选。

p + img { }

通用兄弟选择器

类似于相邻兄弟选择器，无需相邻，只需紧跟其后和同级。

• 后代选择器—— （空格键）——选择后代中所有匹配的元素，无论是子还是孙。
• 子代选择器—— > ——选择直接子元素。
• 相邻兄弟选择器—— + ——选择同级且相邻。（紧跟其后）
• 通用兄弟选择器—— ~ — —同级无需相邻。（单但仍需在后面）

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

选择器参考表

选择器	示例	学习CSS的教程
类型选择器	h1 { }	类型选择器
通配选择器	* { }	通配选择器
类选择器	.box { }	类选择器
ID选择器	#unique { }	ID选择器
标签属性选择器	a[title] { }	标签属性选择器
伪类选择器	p:first-child { }	伪类
伪元素选择器	p::first-line { }	伪元素
后代选择器	article p	后代运算符
子代选择器	article > p	子代选择器
相邻兄弟选择器	h1 + p	相邻兄弟
通用兄弟选择器	h1 ~ p	通用兄弟

课后练习：小试牛刀答案

Selectors One

    h1 {
        color: blue;
    }
    h2 {
        color: white;
        background-color: blue;
    }
    span {
        font-size: 200%;
    }

Selectors Two

      #special {
        background-color: yellow;
      }
      .alert {
        border: 1px solid grey;
      }
      .alert.stop {
        background-color: red;
      }
      .alert.go {
        background-color: green;
      }

Selectors Three

      a {
          color: orange;
      }
      a:visited {
          color: green;
      }
      a:hover {
        text-decoration: none;
      }
      .container p:first-child {
          font-size: 150%;
      }
      .container::first-line {
          color: red;
      }
      tr:nth-of-type(2n) {
        color: white;
        background-color: #333;
      }

Selectors Four

      h2 + p {
          color: red;
      }
      ul.list > li {
        list-style: none;
        border-bottom: 1px solid gray;
      }

Selectors Five

      a[title] {
          border-color: pink;
      }
      a[href*="contact"] {
          border-color: orange;
      }
      a[href^="https"] {
          border-color: green;
      }

参考自

MDN-CSS选择器

CSS 选择器，一篇就够了