1. nth-child(an+b)
可以总结为从第b个元素开始（包含第b个元素），间隔为a的元素。
// 表示从第一个元素开始，间隔为0，也就是第一个元素等同于nth-child(1)div:nth-child(0n+1)
// 表示从第四个元素开始，间隔为2，也就是：4，6，8，10....
div:nth-child(2n+4)
// 表示从第五个开始，间隔为-1，也就是5，4，3，2，1
div:nth-child(-n+5)
2. 属性选择器的细节
/* 匹配包含title属性的a标签 => <a title> */
a[title] {color: purple;}
/* 存在href属性并且属性值为"http://beige.world"的<a>标签*/
a[href="http://beige.world"] {color: green;}
/* 存在href属性并且属性值包含"baidu"的<a>标签*/
a[href*="baidu"] {font-size: 20px;}
/* 存在id属性并且属性值结尾是"-wrapper"的<div>标签 */
div[id$="-wrapper"] {display: flex;}
/* 存在class属性并且属性值包含以空格分隔的"logo"的<div>元素 */
div[class~="logo"] { padding: 2px; }
3. 控制继承
四个属性
inherit: 被应用属性继承父级的该属性（默认就是该值）initial初始化，把应用属性初始为它默认的样式，并且排除继承的干扰（默认会继承的属性也不在默认继承，而是表现出没有任何设置时候的默认样式）unset：意思是恢复其原本的继承方式。对color属性而言，就相当于inherit；而对于诸如border这样默认不继承的属性，就相当于initial。revert: 效果等同于unset且浏览器支持有限，这里不做演示
效果
代码
<ul style="color: green;">
<li class="default">Default <a href="#">link</a> color</li>
<li class="inherit">Inherit the <a style="color: inherit;" href="#">link</a> color</li>
<li class="initial">Reset the <a style="color: initial;" href="#">link</a> color</li>
<li class="unset">Unset the <a style="color: unset;" href="#">link</a> color</li>
</ul>
原理
* default中的a标签没有写默认为`inherit`属性，但是使用了浏览器预设样式表：可以理解为浏览器帮我们为``写了个style，其优先级自然就高于其父元素了。* inherit中的a标签在行内写了inherit，于是使用其父（或祖父，etc）元素的颜色值，在这里是绿色；* initial中的a标签使用color属性初始值（黑色), 注意不要混淆属性初始值和浏览器样式表指定值，样式预设表是浏览器事先写好的样式，但是我color默认值就是黑色啊。* unset，意思是恢复其原本的继承方式。对color属性而言，就相当于inherit；而对于诸如border这样默认不继承的属性，就相当于initial
