css3子选择器（选择某个标签做内容）

时间：7年前阅读：4627

CSS3中新增了几个子元素选择器，大大提高了开发者的开发效率。之前有些要通过为一个个子元素添加class，或者js实现才能实现的效果。现在可以很方便的用选择器实现。

这些新的样式已被现代浏览器及IE9以上支持。

选择器 说明

:first-child 第一个子元素

:last-child 最后一个子元素

:nth-child(3) 第三个子元素

:nth-last-child(3) 倒数第三个子元素

:nth-child(odd) 所有奇数个子元素

:nth-child(even) 所有偶数个子元素

div h2:nth-of-type(even) div 中所有的h2元素中，所有的偶数元素(只针对同类型子元素计算)

:nth-last-of-type 反过来计算

li:nth-child(4n+1) 循环样式匹配第1，5，9...个li

li:nth-child(4n+2) 循环样式匹配第2，6，10...个li

li:nth-child(4n+4) 可简写为 li:nth-child(4n)

ul li:first-child:last-child 是第一个也是最后一个，即匹配ul中只有一个li.

:only-child 上面的简写形式。匹配某个父元素只有一个子元素

h2:nth-child(3) 与 h2:nth-of-type(3) 的区别？

h2:nth-child(3) 指第三个子元素中正好是h2则应用该样式

h2:nth-of-type(3) 指所有的h2子元素的合集中，对第三个h2应用该样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>   
<style type="text/css">    
/*选择的是#hd里第一个p标签*/    
#hd p:first-of-type{    
	color: blue;    
	font-size: 25px;    
}    
/*选择的是#hd里最后一个p标签*/    
/*#hd p:last-of-type{    
	color: purple;    
	font-size: 25px;    
}*/    
/*如果div中只有一个p标签,就选中这个p标签（div可以有其它兄弟元素）*/    
/*div p:only-of-type{    
	color: orange;    
	font-size: 25px;    
}*/    
/*选择的是div中独生子的(要求这个p标签没有任何兄弟元素)p标签*/    
/*div p:only-child{    
	color: orange;    
	font-size: 25px;	
    
}*/    
/*选择的是div中第3个元素，并且要求第3个元素是p标签可以选中（如果第三个标签不是p标签选不中的）*/    
/*div p:nth-child(3){    
	color: red;    
	font-size: 25px;    
}*/    
/*选择的是div中倒数第6个元素，并要求....*/    
/*div p:nth-last-child(6){    
	color: orange;    
	font-size:60px;    
}*/    
/*选择的是div中第4个的p标签*/    
/*div p:nth-of-type(4){    
	color: red;    
	font-size: 26px;    
}*/    
/*选择的是div中倒数第2个的p标签*/    
/*div p:nth-last-of-type(2){    
	color: red;    
	font-size: 26px;    
}*/    
/*选择的是每个div里第一个span标签,并且要求第一个标签符合冒号前面的选择器的要求(简单说就是每个div第一个span标签)*/    
div span:first-child{    
	color: blue;    
	font-size: 26px;    
}    
/*选择的是每个div里最后一个p标签*/    
div p:last-child{    
	color: orange;    
	font-size: 26px;    
}    
</style>    
</head>    
<body>    
<div id="hd">    
<span>这个是psan标签里的内容</span>    
<p>科比支持湖人交易浓眉：湖人这3人远不如他01</p>    
<p>特雷杨：今年新秀都很出色 但我才是最好的一个02</p>    
<p>广厦险胜浙江扳平总比分 胡金秋狂砍34+1603</p>    
<p>网友调侃詹皇被封盖 34岁的他真的老了？04</p>    
<p>综述：诺天王得分超张大帅 马刺击败勇士取九连胜05</p>    
<p>巴萨欲贱卖1.6亿帝星 曼联出1亿欧就能带走这位全能攻击手06</p>    
<p>美股高开低走终结四连涨 AMD大涨近12%07</p>    
<p>如何把苍白的人生包装成牛逼闪闪的简历？08</p>    
<p>对于小Z的吐槽，我已经司空见惯了09</p>    
</div>    
<div>    
<span>666666span</span>    
<p>但是小Z进组以后发现他们对前端自动化没有什么了解</p>    
</div>    
<div>    
<p>用vue的页面仔还是页面仔，哈哈~</p>    
<p>用vue的页面仔还是页面仔，哈哈~</p>    
</div>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3子选择器（选择某个标签做内容）

网友评论