html选择第一个clss,css3如何选择第一个子元素？

css3如何选择第一个子元素？下面本篇文章就来给大家介绍一下使用CSS选择某元素第一个子元素的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css3如何选择第一个子元素？

在CSS中，可以使用:first-child选择器来选择某元素的第一个子元素；:first-child是用来选择某个元素的第一个子元素。

:first-child 选择器匹配其父元素中的第一个子元素。

比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，按照之前的写法，我们需在要第一个li上加上一个相应的class名，比如说“first”，然后我们在给予对应的样式，如下：.wrap li.first {background: green; border: 1px dashed blue;}

在CSS3最新选择器出现之后，我们就可以使用:first-child来实现，就不需要在增加一个额外的class名了，设置如下：.wrap li:first-child {background: green; border: 1px dashed blue;}

两种方法最终效果是一样的，只是后者对我来说在操作上会更显得简单、方便、快捷。

注意： :first-child作用于 IE8以及更早版本的浏览器，DOCTYPE必须已经声明。

示例：设置列表中的第一个

元素选择的样式：

li:first-child {

background: yellow;

}

Coffee
Tea
Coca Cola

Coffee
Tea
Coca Cola

效果图：

更多前端开发知识，请查阅 HTML中文网！！

html选择第一个clss,css3如何选择第一个子元素？相关推荐

html怎么只操作第一个li,css3如何选择第一个子元素？
css3如何选择第一个子元素?下面本篇文章就来给大家介绍一下使用CSS选择某元素第一个子元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css3如何选择第一个子元素? 在 ...
CSS3选择非第一个子元素
有时候我们需要用CSS选择非第一个子元素,例如下面这样的HTML,希望让两个span之间间隔一定的距离,但又不希望简单的给每个span设置margin-right(会导致最后一个span也有margi ...
css3怎么排除第一个,css怎么排除第一个子元素
css排除第一个子元素的方法:1.通过使用伪类选择器":not"实现排除:2.通过使用"nth-of-type"或者"nth-child"实 ...
html第一个子元素选择,css选中父元素下的第一个子元素(:first-child)
前言最近在项目中用到 :first-child 很容易的就想到了,嗯嗯.这不就是选择第一个元素吗? 好像很好用,平时使用中也没有遇到什么问题,理所当然的就以为它只会选中父元素下的第一个元素,对孙元素 ...
js 兼容性封装获取第一个子元素，最后一个子元素，下一个兄弟元素，上一个兄弟元素
高级浏览器: chrome firefox ie9及以上符合web标准浏览器. 低版本浏览器: ie6,ie7,ie8. 节点和元素的适用范围:以firstChild和firstElementChil ...
php选择符和举例子,关于CSS3中选择符的实例详解
英文原文: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中文翻译: www.dudo.org/article.as ...
CSS如何选择第一个和倒数第一个元素
本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法,这里用到了first-child和:last-child,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要 ...
关于CSS选择第一个和倒数第一个元素的方法
本文主要介绍了CSS选择第一个和倒数第一个元素的解决方法,这里用到了first-child和:last-child,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要 ...
css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别、遮罩层效果、三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器兄弟选择器属性选择器伪类选择器其他伪类选择器类元素选择器直接选择器否定选择器伪元素 :after清除浮动 :before和:after 用来写小三角形首字母 ...

html选择第一个clss,css3如何选择第一个子元素？

html选择第一个clss,css3如何选择第一个子元素？相关推荐

最新文章

热门文章