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 选择器，一篇就够了