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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Updating indexes

    Updating indexesUpdatingindexesUpdatingindexes是Maven在下载更新,解决办法如下:Window–>Preferences–>MyeclipseEnterpriseWorkbench–>Maven4Myeclipse–>Maven–>去除Downloadrepositoryindexupdatesons…

    2025年6月16日
    3
  • 英文论文引用文献_外国绘本论文参考文献

    英文论文引用文献_外国绘本论文参考文献php论文英文参考文献一:[1]PedroB.ImprovingthespeedofPHPWebscripts.LinuxJournal.2002[2]ErichGamma,RichardHelm,RalphJohns.DesignPatterns:ElementsofReusableObjectOrientedSoftware..1995[3]H…

    2022年9月1日
    5
  • mysql数据库——连接查询(内连接:自然连接,等值连接。外连接:左连接,右连接,全连接)「建议收藏」

    mysql数据库——连接查询(内连接:自然连接,等值连接。外连接:左连接,右连接,全连接)「建议收藏」????这里是数据库加油站????如果对你有帮助,给博主一个免费的点赞以示鼓励欢迎各位????点赞????评论收藏⭐️数据库版本:mysql8。0.27如果以下代码执行有问题欢迎留言,一起探讨文章目录内连接自然连接和等值连接的区别内连接的实现方式外连接左连接右连接全连接内连接内连接INNERJOIN是最常用的连接操作。从数学的角度讲就是求两个表的交集,从笛卡尔积的角度讲就是从笛卡尔积中挑出ON子句条件成立的记录。在我看来内连接和等值连接差不多,自然连接是内连接中的一个特殊连接自然连接和

    2022年6月8日
    31
  • 给定一个输入文件,包含40亿个非负整数。产生一个不在该文件中的整数。内存限制:1GB…

    给定一个输入文件,包含40亿个非负整数。产生一个不在该文件中的整数。内存限制:1GB…

    2022年2月22日
    48
  • SRC挖掘—web不安全的直接对象引用 (IDOR)漏洞-3day

    SRC挖掘—web不安全的直接对象引用 (IDOR)漏洞-3day什么是IDOR?当应用程序根据用户提供的输入提供对对象的直接访问时,就会发生不安全的直接对象引用(IDOR)。由于此漏洞,攻击者可以绕过授权并直接访问系统中的资源,例如数据库记录或文件。不安全的直接对象引用允许攻击者通过修改用于直接指向对象的参数值来绕过授权并直接访问资源。这些资源可以是属于其他用户的数据库条目、系统中的文件等等。这是因为应用程序接受用户提供的输入并使用它来检索对象而没有执行足够的授权检查。(来源:OWASP)让我们看一个例子。想象一下,您正在使用一个文档共享平台。您可以上传..

    2022年6月5日
    39
  • webstorm 格式化代码及常用快捷键 

    webstorm 格式化代码及常用快捷键 webstorm格式化代码快捷键centOS下Ctrl+Shift+lwindows下Ctrl+Alt+lmac下Option+Command+l查找/代替快捷键说明ctrl+shift+N通过文件名快速查找工程内的文件(必记)ctrl+shift+alt+N通过一个字符快速查找位置(必记)ctrl+F在文件内快速查找代码F3查找下一个shift+F3查找上一个ctrl+R文件内代码替换c…

    2022年6月11日
    185

发表回复

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

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