首页 > 其他分享 >css选择器选择奇数行或偶数行

css选择器选择奇数行或偶数行

时间:2022-12-03 22:58:23浏览次数:58  
标签:奇数 偶数 nth child type 选择器 css

css选择器选择奇数行或偶数行

实现方式有两种

方式一:nth-child

/* 奇数行*/
div:nth-child(odd){

} 

/* 偶数行 */
div:nth-child(even){

} 

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素不论元素的类型

方式二:nth-of-type

/* 奇数行*/
div:nth-of-type(odd){

} 

/* 偶数行 */
div:nth-of-type(even){

} 

nth-of-type(n) : 匹配同类型中的第n个同级兄弟元素。

 

区别:其实两者使用起来基本上是一样的,既然我们设置奇偶样式,大多数情况也都是给同类型标签进行设置的。

参考

标签:奇数,偶数,nth,child,type,选择器,css
From: https://www.cnblogs.com/beileixinqing/p/16948958.html

相关文章

  • CSS记一些零碎点
    flex-basisflex-basis表示items被放入flex容器前的大小,也就是items的理想大小,不是真实大小(item真实大小取决于flex容器的宽度)flex-basis与width同时存在时......
  • scss
    SCSS语法一、变量以$开头默认变量是可以被覆盖的特殊变量:$fontSize:14px;font:#{$fontSize}多值变量:list(类似js数组)和map(类似js对象)两种类型二、嵌套......
  • 网站整体变灰-css
    加入以下样式html{filter:grayscale(100%);-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-f......
  • vsCode的css代码提示reference,怎么关闭?
      设置中,去掉Editor:CodeLens对勾 ......
  • 简易博客页面小项目 html css
    项目预览代码html:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"type="text/css"hr......
  • js向ul标签添加li并且li标签有修改删除按钮+js中添加颜色css样式(使用layui下拉)
    js向ul标签添加li并且li标签有修改删除按钮Layui当中的导航条动态添加效果:1、html放置ul标签<ulclass="layui-nav"id="nav"layui-filter="test"></ul>/2、js编......
  • 5大CSS重点、难点、易错点总结,入门学前端必看
    最近跟粉丝同学反馈,CSS中知识点多,在学习过程中,学到后边忘记前面。有些相似的内容很容搞混,弄得自己学起来特别的吃力和头痛。要对这些容易搞混点的做好区分,最好的办法就是把......
  • 转 CSS居中布局
    底层原理   都是C语言。万物之主C语言。底层语言。 硬件C语言。 转  CSS居中布局https://blog.csdn.net/qq_27575925/article/details/111876431 ......
  • vue scss样式预处理在 vscode 中起作用,但是报错
      2.在最外层级,输入代码  "files.associations":{"*.vue":"vue"} ......
  • 博客园页面定制CSS代码 教程
    花了一点时间修改自己的博客背景设置,现在分享一下代码。希望对大家有帮助。我的比较简单,主要代码模板来源于另外一个博主,然后我在基础上进行了部分修改。博主的连接:h......