css3选择器怎么选择第3个,第6个,第9个,第12个……元素??

html-css010

css3选择器怎么选择第3个,第6个,第9个,第12个……元素??,第1张

代码如下:

li:nth-child(3n)

{

background:#ff0000

}

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

有的,包括:“:not(:first-child)”、“:nth-child(n+2)”两种方式。

1、:not(:first-child):其中,E:not(s)表示匹配所有不匹配简单选择符s的元素E,E:first-child匹配同级兄弟元素中的第一个E元素。

2、:nth-child(n+2):其中nth-child表示第几个son,n+2表示从第二个开始(即所有的n都是取从0开始的自然数)。

扩展资料:

css3中相关的选择器:

1、E:root :匹配文档的根元素。在HTML(标准通用标记语言下的一个应用)中,根元素永远是HTML

2、E:nth-child(n):匹配父元素中的第n个子元素E

3、E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E

4、E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E

5、E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E

6、E:last-child:匹配父元素中最后一个E元素

7、E:first-of-type:匹配同级兄弟元素中的第一个E元素

8、E:only-child:匹配属于父元素中唯一子元素的E

9、E:only-of-type:匹配属于同类型中唯一兄弟元素的E

参考资料来源:百度百科-css3

第一种方法CSS3:-------------------------------------

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>选择某个区间的元素-CSS3</title>

<style>

ul{ width:50%}

li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }

ul li:nth-child(-n+7){ background:#F90}

ul li:nth-child(-n+3){ background:#f5f5f5}

</style>

</head>

<body>

<h2>设置第4~7个li的背景色为橙色</h2>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

<li>14</li>

</ul>

</body>

</html>

第二种方法JS:-------------------------------------

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>选择某个区间的元素-JS</title>

<style>

ul{ width:50%}

li{ background:#f5f5f5 border-bottom:1px solid #ddd padding:5px 0 }

</style>

<script src="

<script>

$(function(){

   $("ul li:lt(7)").css("background","#F90")

   $("ul li:lt(3)").css("background","#f5f5f5")

})

</script>

</head>

<body>

<h2>设置第4~7个li的背景色为橙色</h2>

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

<li>14</li>

</ul>

</body>

</html>