很容易让人纠结的HTML列表元素加上CSS复合、伪类选择器

复合选择器部分：

首先先来一段非常简单的穿插着有序和无序列表的HTML代码

 

<ul>
		<li>儿子元素
			<ol>
				<li>孙子元素</li>
				<li>孙子元素</li>
			</ol>
		</li>
		<li>儿子元素</li>
		<li>儿子元素</li>
		<li>儿子元素</li>
</ul>

 

运行结果显而易见如图所示

让我们来搭配一个CSS的效果，我们编写一个外部链接样式的后代选择器

@charset "utf-8";

ul li{border:1px solid red;}

 

 链接到HTML文件，实现如下效果

6个li元素分别作为ul元素的后代，故有6个红色边框

替换掉选择器属性，变成

@charset "utf-8";

ul li{color: red;}

 

依旧很容易理解

我们将后代选择器变成子元素选择器

@charset "utf-8";

ul>li{border:1px solid red;}

 实现如下效果

与后代选择器实现的效果有所不同，变成子元素选择器后，CSS边框属性仅仅作用于4个作为ul元素子元素的li元素，故结果只有4个边框

再次更改CSS属性

@charset "utf-8";

ul>li {color: red;}

 

 容易产生问题的地方就来了，效果如下

并没有如我们所愿，第一个li元素中嵌套的有序列表两个li元素字体也还是变成了红色，原因就是有序列表中这两个li元素嵌套在了无序列表第一个li元素的内部，此时两者已经形成一个整体。其实CSS本身仅仅让无序列表第一个li元素字体变红，但由于有序列表两个li元素已经和无序列表第一个li元素形成一个整体，所以也变成了红色。虽然结果和后代选择器中完全一样，但是实现效果的原因是截然不同的。这个例子也告诉我们选择器作用于它的子元素时，如果它的子元素内部还嵌套了子元素，那么这个被嵌套的子元素还是会跟着它的父元素也就是第一层子元素跟着改变样式。

伪类选择器部分：

搞清楚了复合选择器作用原理后，其实伪类选择器也就没那么复杂了，同样还是上面的HTML列表

先来一个伪类选择器

@charset "utf-8";

ul li:first-child {border:1px red solid;}

实现如下效果

此伪类选择器作用于ul元素所有后代元素li元素的首个元素，所以ul元素嵌套的第一个li元素，以及第一个li元素所嵌套的ol元素的第一个li元素都有了红色的边框。

替换掉选择器属性

@charset "utf-8";

ul li:first-child {color: red;}

实现如下效果：

理由还是和上面的一样，ul嵌套的第一个li元素和li元素嵌套的ol元素中的两个li元素已经形成了一个整体，故实现此效果。

变换伪元素选择器

@charset "utf-8";

ul>li:first-child {border:1px red solid;}

实现如下效果

变换属性

理由同上，形成了一个整体，不多做解释了。

CSS代码：

@charset "utf-8";

ul li:last-child {border:1px red solid;}

效果如下

变换选择器属性

@charset "utf-8";


ul li:last-child {color: red;}

实现如下效果

CSS代码：

@charset "utf-8";

ul>li:last-child {border:1px red solid;}

实现如下效果

变换选择器属性：

@charset "utf-8";


ul>li:last-child {color: red;}

实现如下效果：

 

总结：

一种HTML的样式很大程度上能用多种途径，方法生成。有时候实现一样的效果，但是作用原理会是完全不同的。学习中尽量去探索最优最简洁的途径，这样项目易于维护，不易出错。