CSS关于伪类选择器的使用

最近在学网页设计，看了不少网站。发现他们都很少使用伪类选择器？基本上都是一个 元素class="xx yy zz" 同时使用多个类，这看上去可读性不会比较差么？还是说有什么我还不清楚的开发规范么？就像这里，做一个简易的水平导航栏。

img

我看京东类似的实现是 li 和它包含的 a 都使用了各种类名——即使这个类名本身没有任何属性值。

img

他这里的类完全没用上，都是 （.父类名 .类名 ）来定义样式，就很怪。譬如用 #navitems-group1 .fore1 a, #navitems-group1 .fore2 a {...} 来写。

直接用伪类来选择，想要确保层叠性的话多加几个父类类名就好了，一样可以达到效果。我看到目前好像就一个个人微博上用了这种选择器来定义样式。

<div class="navitems">
            <ul>
                <li><a href="">全部商品分类</a></li>
                <li><a href="">服装城</a></li>
                <li><a href="">美妆馆</a></li>
                <li><a href="">传智超市</a></li>
                <li><a href="">全球购</a></li>
                <li><a href="">闪购</a></li>
                <li><a href="">团购</a></li>
                <li><a href="">拍卖</a></li>
                <li><a href="">有趣</a></li>
            </ul>
        </div>

.navitems ul li {
    float: left;
}

.navitems li:first-child {
    width: 209px;
    background-color: #b1191a;
    margin-right: 20px;
}

.navitems ul li:first-child a {
    color: white;
}

.navitems ul li:nth-child(n+2) {
    margin: 0 20px 0 30px;
}

是不是这样子效率会低所以就不用啊？

这玩意儿就像地址一样，从上到下，便于查找和区分位置，其次他有些地方并非固定的，就像你截图的那块导航，他不一定是固定的，他有可能是后台传过来的数据，前端只是用于渲染，在渲染过程中为某个类别添加固定的类名，你用伪类，数据顺序发生变化，你样式就有问题了啊，你下面的代码写死的话用伪类当然是没有问题的，像京东那些，今天搞活动，明天又没活动了，对于这种频繁添加删除某一个导航，一半都是后端直接控制

可能是为了复用，伪类 复用性不好。一般 ui库都会用类名得，因为它会有主题定制的功能 。现在大部分网站都是用ui库实现的

还有就是早期这个兼容性不是很好，所以大家就都不怎么使用，虽然现在基本都支持了，但是还是习惯用class。

伪类::before ::after 一般用于装饰，比如加个线了、加个点之类的，还有早期用于处理浮动后出现的问题。
伪类:last-child :first-child 系列用于控制第一个或者最后一个元素，因为数据是后台传过来的，你没法给第一个或者最后一个加class，只能用伪类
伪类:nth-child(n) 也是控制某个元素的样式
我工作中常这样写伪类
&:not(:last-chlid){margin-bottom:20px;}
&:not(:last-child) {
border-bottom: 1px dashed #eee;
}