CSS选择器

常用的CSS选择器大家都熟悉,但是说到属性选择器,一些伪类选择器,伪元素未必每个人都会用,现在微软已经停止支持IE11以前的IE浏览器了,不考虑兼容问题的话,用CSS3新增的选择器还是挺方便的,例如:last-child,:not这些。看了几篇文章,详细学习了所有的CSS选择器,大部分都写demo尝试了一遍,也体验了emmet强大的语法,例如想生成下面的html代码,输入ul>li[class=num$]{number $}*10后按下Tab键就搞定,其他emmet的用法可以看官方文档

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
<li class="num1">number 1</li>
<li class="num2">number 2</li>
<li class="num3">number 3</li>
<li class="num4">number 4</li>
<li class="num5">number 5</li>
<li class="num6">number 6</li>
<li class="num7">number 7</li>
<li class="num8">number 8</li>
<li class="num9">number 9</li>
<li class="num10">number 10</li>
</ul>

第2篇文章里的思维导图非常详细,可以拿来快速参考。