本文主要是介绍CSS-子元素选择器,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 为第一个P标签设置一个背景颜色为黄色
* :first-child 可以选中第一个子元素
* :last-chhild 可以选中最后一个子元素
*/
p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
/**
* :nth-child 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数,指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
*/
p:nth-child{
background-color: yellow;
}
/**
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常类似
* 只不过child,是在所有的子元素排列
* 而type,是在当前类型的子元素中排列
*/
p:first-of-type{
background-color: #0000FF;
}
</style>
</head>
<span>我是span</span>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<p>我是一个P标签</p>
<body>
</body>
</html>
这篇关于CSS-子元素选择器的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!