最专业的营销网站建设,海外房产网站建设,营销型网站建设有哪些,系统网站怎么做的举一个简单的例子来说明什么是伪类#xff1f; 从之前的代码中#xff0c;如下图#xff0c;我们像给这两个列表中的某一列单独设置样式#xff0c;我们该如何做呢#xff1f;
我们肯定会选择在li标签上添加class去实现#xff0c;如下
开始标记结束标记实际元素 从之前的代码中如下图我们像给这两个列表中的某一列单独设置样式我们该如何做呢
我们肯定会选择在li标签上添加class去实现如下
开始标记结束标记实际元素
ulli classfirst-li能够使用基本的 Web 开发语言/lili手工制作漂亮的网站而不是依赖像 Wordpress 或 Wix 这样的工具/lili构建 Web 应用程序/lili给朋友留下深刻印象/lili玩得开心/li/ul● 之后添加CSS代码即可
.first-li { font-weight: bold; } 但是我们有更好的方法去实现此类目的使用伪元素 #CSS中添加
li:first-child { font-weight: bold; } 这样仍然可以实现 我们可以看作
是我们的父类而是孩子child第一个孩子就是first-child举一反三现在如果像让最后一个元素是斜体我们可以这样去写。 li:last-child { font-style: italic; }
● 当然我们也可以随意指定一个li元素给与附加单独样式例如我想要第二个li元素 li:nth-child(2) { color: red; } 除了上述还有其他用法 ● 将奇数的li元素设置为红色 li:nth-child(odd) { color: red; } ● 将偶数的li元素设置为红色 li:nth-child(even) { color: red; }
按照以上方式设置段落 ● 例如我们想给文章的第一个P标签给予红色样式
我们会这样写。 article p:first-child { color: red; } 但是这样并不会奏效
● 看下尾部写上就会奏效
article p:last-child { color: red; } 这是为什么呢 注意article p:first-child我们并不能理解为是aritcle的第一个P标签的孩子而是aritcle的第一个孩子由于article的第一个孩子不是p标签故而没有生效。而最后一个标签是p标签故而last-child可以生效。所以当父元素中又很多不同的子元素伪类就不能很好的工作。
