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


相关推荐

  • 曾國藩家書摘_曾国藩语录及诠释

    曾國藩家書摘_曾国藩语录及诠释人物简介曾国藩(1811年11月26日-1872年3月12日),中国近代政治家、军事家、理学家、文学家,与胡林翼并称曾胡。曾国藩与李鸿章、左宗棠、张之洞并称“晚清四大名臣”,官至武英殿大学士、两江总督,同治年间封一等毅勇侯,谥文正。人物评价知人之明,谋国之忠,自愧不如元辅;同心若金,功错若石,相期无负平生。-左宗棠吾师道德功业,固不待言,即文章学问,亦卓…

    2025年6月2日
    3
  • docker(1)下载安装for mac

    docker(1)下载安装for mac前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

    2022年7月31日
    4
  • 2021pycharm永久激活码[免费获取]

    (2021pycharm永久激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~MLZPB5EL5Q-eyJsaWNlb…

    2022年3月20日
    93
  • 用matlab求分段函数「建议收藏」

    用matlab求分段函数「建议收藏」functiony=fum(x)ifx   y=x; elseifx=1   y=2*x-1;elseifx10   y=3*x-11;else  y=sin(x)+log(x);end在matlab的命令行窗口,输入fum(5)

    2022年5月24日
    40
  • 什么时候PHP经验MySQL存储过程

    什么时候PHP经验MySQL存储过程

    2022年1月4日
    54
  • python的第三方库是用什么实现的_python 第三方库

    python的第三方库是用什么实现的_python 第三方库编写自己的第三方库当你看见你编程时所用到的所有Python第三方库时,有没有想过,他们是怎么被允许使用的呢?这篇教程,帮你制作一个属于自己的第三方库!1.你需要的工具pycharmsetuptools库twine库2.详细步骤首先,打开pycharm,新建一个项目然后选择编译器Virtualenv,新建一个虚拟环境等待虚拟环境创建完成,如果默认存在main.py,就删除它然后,新建一个pythonpackage文件夹,取名为你要上传的库的名字创建后,文件夹中默认有__init__

    2022年8月31日
    3

发表回复

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

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