91 lines
2.6 KiB
HTML
91 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>10_伪类选择器_结构伪类2</title>
|
||
<style>
|
||
/* 选中div的第一个儿子p元素（按照所有兄弟计算） --看结构1 */
|
||
/* div>p:first-child {
|
||
color: red;
|
||
} */
|
||
/* 选中div的最后一个儿子p元素（按照所有兄弟计算） --看结构1 */
|
||
/* div>p:last-child {
|
||
color: red;
|
||
} */
|
||
|
||
/* 选中div的第N个儿子p元素（按照所有兄弟计算） --看结构1 */
|
||
/* div>p:nth-child(3) {
|
||
color: red;
|
||
} */
|
||
|
||
/* 选中div的偶数个儿子p元素（按照所有兄弟计算） an+b的形式 --看结构2 */
|
||
/* 关于n的值 --结构2
|
||
1. 0或者不写： 什么都选不中 --几乎不用
|
||
2. n：选中所有的子元素 --几乎不用
|
||
3. 1 ~正无穷的整数，选中对应序号的子元素
|
||
4. 2n 或者 even： 选中需要为偶数的子元素
|
||
5. 2n+1 或者 odd： 选中需要为奇数的子元素
|
||
6. -n+3： 选中序号小于等于3的子元素
|
||
*/
|
||
/* div>p:nth-child(2n) {
|
||
color: red;
|
||
} */
|
||
/* 选中div的第一个p元素（同类型的第一个）--结构3 */
|
||
/* div>p:first-of-type {
|
||
color: red;
|
||
} */
|
||
/* 选中div的最后一个p元素（同类型的最后一个）--结构3 */
|
||
/* div>p:last-of-type {
|
||
color: red;
|
||
} */
|
||
/*选中div的第n个p元素（按照所有同类型的兄弟元素进行计算）--结构3 */
|
||
div>p:nth-of-type(3) {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<!-- 结构1 -->
|
||
<!-- <div>
|
||
<p>张三: 98分</p>
|
||
<p>李四: 88分</p>
|
||
<p>王五: 78分</p>
|
||
<p>赵六: 68分</p>
|
||
<p>孙七: 58分</p>
|
||
<p>老八: 48分</p>
|
||
</div> -->
|
||
|
||
<!-- 结构2 -->
|
||
<!-- <div>
|
||
<p>第1个</p>
|
||
<p>第2个</p>
|
||
<p>第3个</p>
|
||
<p>第4个</p>
|
||
<p>第5个</p>
|
||
<p>第6个</p>
|
||
<p>第7个</p>
|
||
<p>第8个</p>
|
||
<p>第9个</p>
|
||
<p>第10个</p>
|
||
</div> -->
|
||
|
||
<!-- 结构3 -->
|
||
<div>
|
||
<span>测试</span>
|
||
<p>张三: 98分</p>
|
||
<p>李四: 88分</p>
|
||
<p>王五: 78分</p>
|
||
<span>测试</span>
|
||
<p>赵六: 68分</p>
|
||
<p>孙七: 58分</p>
|
||
<span>测试</span>
|
||
<p>老八: 48分</p>
|
||
<p>哈哈</p>
|
||
<span>呃呃呃</span>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |