css找某个元素的下个子元素,使用CSS获取特定位置的子元素

想要使用CSS获取特定位置的子元素，可以使用CSS :nth-child()选择器。:nth-child()选择器仅用于选择属于其父级的第n个子级(无论类型如何)的元素。下面本篇文章就来给大家介绍一下CSS :nth-child()选择器，希望对大家有所帮助。

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

语法：: nth-child(arg) {

// CSS样式

}

参数：

其中arg是表示匹配元素的模式的参数。它可以是一个数字(number)、一个关键字(odd 或 even)或一个线性方程。

●　number：表示其位置由参数指定的元素。

●　odd：表示位置为奇数的元素，即1,3,5等。

●　even：代表位置均匀的元素，即2,4,6等。

●　线性方程：表示每个正整数n的位置与模式A * n + B匹配的元素。n的值从零开始。

示例1：选择作为参数传递的元素

p:nth-child(2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World！

效果图：

示例2：选择偶数子元素

p:nth-child(even) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World！

效果图：

示例3：选择奇数子元素

p:nth-child(odd) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World！

效果图：

示例4：将线性等式作为参数

p:nth-child(3n + 2) {

color: red;

font-weight: bold;

font-size: 20px;

}

Hello World！

效果图：

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

css找某个元素的下个子元素,使用CSS获取特定位置的子元素相关推荐

css找某个元素的下个子元素,css判断某元素的子元素个数并分别设置样式的方法...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
css找某个元素的下个子元素,CSS可以检测一个元素有多less个子元素？
注:这个解决scheme将返回一定长度的子集,而不是你所要求的父元素. 希望它仍然有用. 安德烈·路易斯提出了一个方法: http : //lea.verou.me/2011/01/styling-c ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
JS与jQuery获取任意事件的子元素下标(获取当前类数组的某一子元素下标)
JavaScript方法 var child = document.getElementsByClassName("child");for(var i=0;i<child.l ...
jQuery——子元素筛选器
子元素筛选器名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...
hover父元素,不希望子元素消失（子元素盒子在下方展开，但鼠标移到子元素时盒子却消失了）
问题: 1.hover注销父元素时,展开11111111子元素盒子下拉框: 2.鼠标移动到11111111子元素时,不希望11111111盒子消失:但有时候却消失了: 原因:'注销' 此元素可能存现绝 ...
css获取父元素下第几个元素出坑和JQuery通过index()获取下标出坑方法
这里首先要区分nth-of-type(n)和nth-child(n)的区别: nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. nth-child(n) ...
css表示第一个元素和最后一个元素,CSS第一个和最后一个子元素
我在一个div中渲染2个按钮,并且想要向左和向右浮动一个按钮.CSS第一个和最后一个子元素我以为我可以使用:第一,孩子最后:子元素,但似乎对CSS的:第一胎运行,并且然后在写的:最后一子标签我还使 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...

css找某个元素的下个子元素,使用CSS获取特定位置的子元素

css找某个元素的下个子元素,使用CSS获取特定位置的子元素相关推荐

最新文章

热门文章