complete css Pseudo-Classes.md 🤖 🐔 🛴

Blog/63.CSS 伪类选择器 Pseudo-Classes.md

@@ -1,6 +1,6 @@
 # CSS 伪类选择器
 
-> 写了那么多的伪类选择器，有必要总结一下
+> 写了那么多的伪类选择器，有必要做个笔记总结一下
 
 ### `:root`
 
@@ -50,15 +50,79 @@ E是其父元素的特定类型的唯一子元素
 
 ### 关于 child 和 type
 
+`p:nth-child(3n)` 这个选择器会查询每一个父元素的第三个子元素, 如果是 p 元素就会匹配
 
+`p:nth-of-type(3n)` 这个选择器会查询每一个父元素的第三个 p 子元素
 
 ### `E:empty`
 
+E元素没有子元素 因此像 `<p>hello</p>` 和 `<p> </p>` 并不会被 `p:empty` 匹配到，但是 `<p></p>` 和 `<p><!-- comment --></p>` 能够被匹配
+
+这个选择器也会匹配一个空标签或自闭和标签 比如 `<br>` 和 `<input />` 
+
+CSS Selectors 4 中还会有 `p:blank` 来匹配 `<p> </p>`
 
 ### `E:lang(en)`
+
+匹配以语言 en 表示的元素E 比如
+
+```html
+
+<div lang="en"><q>This English quote has a <q>nested</q> quote.</q></div>
+<div lang="fr"><q>This French quote has a <q>nested</q> quote.</q></div>
+<div lang="de"><q>This German quote has a <q>nested</q> quote.</q></div>
+```
+
+```css
+:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+```
+
 ### `E:not(exception)`
+
+『否定』选择器
+
+匹配不符合参数选择器 exception 的元素
+
+exception不能包含另外一个否定选择器
+
+例如：
+
+`input:not([type=checkbox]):not([type=radio])` 会匹配除了 checkbox 和 radio 之外的所有 input 元素
+
+```html
+<p>Some text.</p>
+<p class="classy">Some other text.</p>
+<span>One more text<span>
+```
+
+```css
+p:not(.classy) { color: red; }
+body :not(p) { color: green; }
+```
+
 ### `::before`
+
+为当前元素创建一个子元素作为伪元素, 位于该元素之前
+
+默认为行内元素
+
 ### `::after`
+
+为当前元素创建一个子元素作为伪元素, 位于该元素之后
+
+在 css2 中使用 `E:after`  `E:before`
+
+
 ### `::first–letter`
+
+匹配第一个字母
+
 ### `::first–line`
+
+匹配元素的第一行
+
 ### `::selection`
+
+匹配选中的文字