CSS3选择器 2019.9.19

一、

1. 子代选择器   E>F
2. 相邻选择器   E+F（F紧挨着E）
3. 兄弟选择器   E~F

例：

div.big.c1    (tap)
div#big
div>div*3
div#wrap>p+h1
div#wrap>ul>li*4

二、伪类选择器

1. a:hover
2. E:nth-child(n)
3. E:after;E-before.  (在E元素内容前或后加一个行内元素)

例：

p:nth-of-type(2n):after{content:"test";}

h2{this is h2 $}*4    自动生成4条带有相同内容的h2字段

三、属性选择器

1. E[attr="***"]        筛选所有E元素中符合HTML属性attr=“***”

•  以***开头：^
• 包含***：*
• 以***结尾：$

例：

input[type="text"]
div[id="div1"]

四、有关便捷输入可搜索：Emmet教程https://www.w3cplus.com/tools/emmet-cheat-sheet.html