【CSS】:nth-child和:nth-of-type

:nth-child,先根据条件再查找类名,如下例中,先查找奇数元素再满足div

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div:nth-child(2n+1) {
      background: #f81;
    }
  </style>

</head>

<body>
  <div>1 - div1</div>
  <span>2 - span1</span>
  <div>3 - div2</div>
  <div>4 - div3</div>
  <span>5 - span2</span>
  <div>6 - div4</div>
</body>

</html>

所以样式如下:

:nth-of-type,先查找类名再查询符合条件的,如下例中,先查找div再满足是奇数div

javascript 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div:nth-of-type(2n+1) {
      background: #f81;
    }
  </style>

</head>

<body>
  <div>1 - div1</div>
  <span>2 - span1</span>
  <div>3 - div2</div>
  <div>4 - div3</div>
  <span>5 - span2</span>
  <div>6 - div4</div>
</body>

</html>

所以样式如下:

相关推荐
Asthenia041226 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj5031 分钟前
前端基础之《React(1)—webpack简介》
前端·react
被巨款砸中35 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略1 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen8681 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
写不来代码的草莓熊2 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab2 小时前
【HTML分离术】
前端·html
文心快码BaiduComate2 小时前
新手该如何选择AI编程工具?文心快码Comate全方位体验
前端·后端·程序员
夫唯不争,故无尤也3 小时前
Tomcat 内嵌启动时找不到 Web 应用的路径
java·前端·tomcat
lichong9513 小时前
【Xcode】Macos p12 证书过期时间查看
前端·ide·macos·证书·xcode·大前端·大前端++