css选择器nth-child()和nth-of-type()的应用

css选择器nth-child()和nth-of-type()的应用

 1 <style>
 2         .table-striped tbody > tr:nth-child(odd) > td, .table-striped tbody > tr:nth-child(odd) > th {
 3             background-color: #f9f9f9;
 4         }
 5         /*  nth-child():规定属于其父元素的第二个子元素的每个p的背景色;
 6             nth-child(n):选择器匹配属于其父元素的第N个子元素,不论元素的类型,n可以使数字、关键词或表达式
 7             odd和even是可用于匹配下标是奇数或者偶数的子元素的关键词
 8 
 9             nth-of-type(n):选择器匹配属于父元素的特定类型的第N个子元素的每个元素,n可以使数字、关键词或表达式
10 
11             区别:nth-child(),该选择器选取父元素的第N个子元素,与类型无关
12             */
13     </style>
14 
15 
16 <div style="margin-top: 100px;">
17         <table class="table-striped">
18             <tbody>
19                 <tr>
20                     <td>1</td>
21                     <td>dafsdf</td>
22                 </tr>
23                 <tr>
24                     <td>2</td>
25                     <td>QQQQQQQQQ</td>
26                 </tr>
27                 <tr>
28                     <td>3</td>
29                     <td>sssssssssssss</td>
30                 </tr>
31                 <tr>
32                     <td>4</td>
33                     <td>zzzzzzzzzzzzz</td>
34                 </tr>
35             </tbody>
36         </table>
37 
38     </div>

 

转载于:https://www.cnblogs.com/itboy-2009/p/4744516.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/109367.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • pycharm导出依赖包_pycharm快速倒包

    pycharm导出依赖包_pycharm快速倒包一般你在pycharm本身库里面导入一个外部没有的包这个时候pycharm里面就会报错,所以你要先下载好你想要导入的包,步骤如下:

    2022年8月29日
  • java 特点_JAVA的几个重要特点[通俗易懂]

    java 特点_JAVA的几个重要特点[通俗易懂]展开全部一.简单性:Java是纯62616964757a686964616fe58685e5aeb931333433663063面向对象语言,语法简单明了,易于掌握。Java使用接口取代了多重继承,并且取消了指针,因为多重继承和指针会使程序变得复杂。Java还会自动地收集内存垃圾,使得内存管理变得更为简单。Java还提供了丰富的类库、API文档以及第三方开发包,还有大量Java的开源项目。二.面向…

    2022年7月7日
  • 中国90后福布斯排行榜前30_2019中国90后十大富豪榜

    中国90后福布斯排行榜前30_2019中国90后十大富豪榜作者|佩奇出品|区块链大本营(blockchain_camp)近日,福布斯发布“Forbes30Under30Asia2019”金融和风险投资类榜单…

    2022年9月30日
  • opencv之haar特征+AdaBoos分类器算法流程(二)[通俗易懂]

    opencv之haar特征+AdaBoos分类器算法流程(二)

    2022年1月24日
  • SPI接口详细介绍

    SPI接口详细介绍1.概述SPI=SerialPeripheralInterface,是串行外围设备接口,是一种高速,全双工,同步的通信总线。常规只占用四根线,节约了芯片管脚,PCB的布局省空间。现在越来越多的芯片集成了这种通信协议,常见的有EEPROM、FLASH、AD转换器等。优点:支持全双工,push-pull的驱动性能相比open-drain信号完整性更好;支持高速(100MHz以上…

    2022年6月10日
  • Oracle Sequence创建与使用[通俗易懂]

    Oracle Sequence创建与使用[通俗易懂]原文地址:https://blog.csdn.net/Karloo/article/details/51423340(记录学习)1.创建sequence语句:CREATESEQUENCEseq_name–seq_name为计数器的名字,自定;INCREMENTBY1–每次加幅度:1,2,3,….;STARTWITH1–起始序号,以实际生产情况而定;NOM…

    2022年10月19日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号