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)
上一篇 2021年9月8日 上午11:00
下一篇 2021年9月8日 下午12:00


相关推荐

  • Linux 反汇编工具,逆向与反汇编工具

    Linux 反汇编工具,逆向与反汇编工具逆向与反汇编工具了解反汇编的一些背景知识后 再深入学习 IDAPro 之前 介绍其他一些用于二进制文件的逆向工程工具 会对我们学习有所帮助 这些工具大多在 IDA 之前发布 并且仍然可用于快速分析二进制文件 以及审查 IDA 的分析结果 如我们所见 IDA 将这些工具的诸多功能整合到它的用户界面中 为逆向工程提供了一个集成环境 最后 尽管 IDA 确实包含一个集成调试器 在这里我们不会讨论 因为在第 24 25 和 2

    2026年3月19日
    2
  • idea主题样式插件[通俗易懂]

    idea主题样式插件[通俗易懂]1、File->Settings…->Plugins中搜索MaterialThemeUI,然后点击安装,安装完成后重启Idea2、重启后会自动进入设置样式界面3、进入后可自己重新配置File->Settings…->Editor->ColorScheme进行设置还有背景图设置在plugin中添加backgroundIma…

    2022年6月27日
    74
  • 京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节「建议收藏」

    京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节「建议收藏」的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里,第京的季节里

    2022年10月3日
    5
  • Java安全之C3P0链利用与分析

    Java安全之C3P0链利用与分析0x00前言在一些比较极端情况下,C3P0链的使用还是挺频繁的。0x01利用方式利用方式在C3P0中有三种利用方式httpbaseJNDIHEX

    2021年12月13日
    44
  • pyinstaller 打包exe

    pyinstaller 打包exe环境:虚拟环境win10:21H2conda:4.11.0python:3.8.0所包含一些特殊的库:tensorflow-gpu:2.7pyqt5:5.15.6pyqt-tools:1.0.0pyinstaller:4.9pymysql:1.0.2pyyaml:6.0打包过程:1.在虚拟环境里安装pyinstallerpipinstallpyinstaller2.以管理员权限进入anacondaPromptcondaactiva

    2022年6月24日
    24
  • qlistwidget虚线_QlistWidget自定义item[通俗易懂]

    qlistwidget虚线_QlistWidget自定义item[通俗易懂]东西不能知道拿来用,但可以借鉴效果简单版QListWidget*list=newQListWidget;QListWidgetItem*item=newQListWidgetItem(list,0);item->setSizeHint(QSize(100,100));QWidget*w=newQWidget(list);QHBoxLayout*layout=newQHBo…

    2022年6月6日
    39

发表回复

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

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