第2章 css选择器

优雅降级与渐进增强

• 优雅降级：为不同性能级别的用户设计不那么完美的应用
• 渐进增强；是一种开发方式和设计理念，保证最核心的功能实现，让低端用户也能看到站点内容，然后再使用高端的增强功能，给用户带来更好的体验

选择器注意点

1. 类选择器在一个页面中可有多个相同的类名，ID选择器的ID值在整个页面中是唯一的一个
2. 后代选择器（E F）与子选择器（E>F）的区别：后代选择器的F无论在E在E中多少层级都会被选中，而子选择器F仅仅是E的子元素

（动态伪类选择器）爱恨原则

定义链接样式时务必确认定义的顺序，link--visited--hover-active，也就是我们常说到的LoVe HAte原则（大写字母就是它们的首字母）

ul中的nth-child()

<ul>
    <li>1</li>
    <li>2</li>
    <div>div</div>
    <div>div</div>
    <li>3</li>
</ul>
ul>li:nth-child(3){ 
    background-color:yellow;
}

以上代码选择的不是第三个li,实际上选择的是第一个div,也就是说，ul中第三个li元素前不存在其他元素时，命题才有意义

nth-child()与nth-last-child()

nth-child(odd)选择的是奇数项,nth-last-child(odd)选择的是偶数项;
nth-child(even)选择的是偶数项,nth-last-child(even)选择的是奇数项;

nth-child()与nth-of-type()

<div class="post">
    <h1>我是标题一</h1>
    <p>我是文章中第一个段落</p>
    <p>我是文章中第二个段落</p>
</div>
.post>p:nth-child(2){
    color:red;
}//选择了段落一
.post>p:nth-of-type(2){
    color:red;
}//选择了段落二

nth-child()选择的是子元素且子元素刚好在那个位置，nth-of-type()选择的是父元素的子元素，而且子元素是指定类型，nth-of-type()更加稳定，建议使用nth-of-type()

E[attr*=val]与E[attr~=val]

E[attr*=val]匹配的是元素属性中只要包含“val”字符串就行，也就是说可以匹配vale,E[attr~=val]匹配的是元素属性值中要包含“val”,是一个单词