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


相关推荐

  • php基础知识(七)

    php基础知识(七)

    2021年6月14日
    112
  • 手机按键精灵常用命令

    手机按键精灵常用命令微信类RunApp”com.tencent.mm”//打开微信应用RunApp”com.tencent.mm”,”.plugin.sns.ui.SnsTimeLineUI”//朋友圈RunApp”com.tencent.mm”,”.plugin.sns.ui.SnsMsgUI”//朋友圈回复给我的消息RunApp”com.tencen…

    2022年5月31日
    59
  • linux中sftp默认登录的端口号是多少? sftp通过指定的端口号连接?sftp默认端口号[通俗易懂]

    linux中sftp默认登录的端口号是多少? sftp通过指定的端口号连接?sftp默认端口号[通俗易懂]需求描述:  今天一个同事,遇到个问题,程序连接sftp服务器连接不上,问我端口号是多少,  我想了一下是21还是22,所以就做了测试,发现sftp默认的连接端口号是22,  在此做下记录.操作过程:1.使用sftp默认的端口号进行登录aiuap_cj@cuchc802:~>sftpaisftp@10.124.163.133aisftp@10.124.163.13…

    2022年9月14日
    0
  • c++ map有序还是无序_hashmap与map的区别

    c++ map有序还是无序_hashmap与map的区别概述简单对比map和unordered_map的性能。map内部是红黑树,在插入元素时会自动排序,而无序容器unordered_map内部是散列表,通过哈希而不是排序来快速操作元素,使得效率更高。当你不需要排序时选择unordered_map的效率更高。测试范例测试代码#include&lt;iostream&gt;#include&lt;string&gt;#in…

    2022年9月23日
    0
  • Mac 破解zip压缩文件密码详解

    Mac 破解zip压缩文件密码详解使用fcrackzip来破解zip类型压缩文件fcrackzip是一款专门破解zip类型压缩文件密码的工具,工具破解速度还是可以的,能用字典和指定字符集破解,适用于Linux、MacOS系统。如果你的电脑没有安装brew,需要执行下面命令行/usr/bin/ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebr…

    2022年5月1日
    460
  • git cherry-pick详解_git discard

    git cherry-pick详解_git discard概述gitcherry-pick可以理解为”挑拣”提交,它会获取某一个分支的单笔提交,并作为一个新的提交引入到你当前分支上。当我们需要在本地合入其他分支的提交时,如果我们不想对整个分支进行合并,而是只想将某一次提交合入到本地当前分支上,那么就要使用gitcherry-pick了。用法gitcherry-pick[&amp;lt;options&amp;gt;]&amp;lt;commit-is…

    2022年8月22日
    27

发表回复

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

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