CSS关于伪类选择器的使用

Question

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

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

他这里的类完全没用上，都是 （.父类名 .类名 ）来定义样式，就很怪。譬如用 #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;
}

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

Answer 1

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