深入理解css3伪类选择器
2018-09-17 本文已影响0人
Weastsea
-
E:nth-of-type(n)
表示E的父元素中，第n个类型为E的子节点。而不管其在兄弟内的位置如何。注意措辞跟nth-child的区别，这也是理解两者的关键。 -
E:nth-last-of-type(n)
表示从后往前计算，E的父元素中，第n个类型为E的子节点，而不管其在兄弟内的位置如何 -
自己可以写一些例子来帮组理解
参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,h1{
width: 100%;
height: 50px;
margin-bottom: 10px;
border: 1px solid pink;
}
div:nth-of-type(1){
background-color: yellow;
}
/*div:nth-of-type(odd){
background-color: yellow;
}
div:nth-of-type(even){
background-color:yellow;
}*/
/*div:nth-of-type(3n+1){
background-color:green;
}*/
/*div:nth-last-of-type(1){
background-color:red;
}*/
</style>
</head>
<body>
<h1>1</h1>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
- E:nth-child(n)
表示E父元素中的第n个子节点，且类型为E。必须同时满足这两个条件，才能被选中。对比nth-of-type是严格匹配。
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
- E:nth-last-child(n)
表示从后往前计算，E父元素中的第n个子节点，且类型为E，必须同时满足这两个条件，才能被选中。
可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
- E: first-child
表示一组兄弟元素中的第一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。
可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child
- E:last-child
与:first-child相反，表示一组兄弟元素中的最后一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。
可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child
- E:first-of-type
表示E父元素中，第一个出现的E类型的节点，而不管其在兄弟内的位置如何
可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type
- E:last-of-type
表示E父元素中，最后一个出现的E类型的节点，而不管其在兄弟内的位置如何
可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type
- E:only-child
表示E的父元素中，只有E一个子元素。注意：子节点不包含文本节点
可以参考 ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child
- E:only-of-type
表示了E类型元素没有其他相同类型的兄弟元素，也可以直接这么用:only-of-type代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type
可以配合代码来理解以上内容，根据理解，灵活的编写例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div,h1{
width: 100%;
height: 50px;
margin-bottom: 10px;
border: 1px solid pink;
}
div:first-child{
background-color: yellow;
}
/* body div:last-child{
background-color: yellow;
} */
/* body h1:first-of-type{
background-color: yellow;
} */
/* body h1:last-of-type{
background-color: yellow;
} */
/*h1 span:only-child{
display: block;
height: 20px;
background-color: red;
}*/
/* h1 strong:only-of-type{
display: block;
height: 40px;
background-color: red;
} */
</style>
</head>
<body>
<h1>
<span></span>
<strong></strong>
</h1>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</body>
</html>
