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中文安装包如果是自定义安装的,那么他的相应地址应该是下面提供中文安装包链接:https://pan.baidu.com/s/1pf3B-kwZVRwzrWBxj-oZ7g提取码:hduy  这也是俺自己正在用的pycharm中文安装包Pycharm中文安装包一般来说都是放在C:\…

    2022年5月16日
    47
  • 互联网裁员为什么专捡大于35的裁?

    互联网裁员为什么专捡大于35的裁?以前写过一篇文章《在中国程序员是青春饭吗?》,一时间,各个平台都成为爆文,在这篇文章中,详细讲解了程序员的青春饭问题,并且给出了具体地五个出路。第一条出路,说的是需要走技术专家路线。有些小伙伴就有疑问了,我年龄大了,我技术菜,就我不能降薪去小公司吗?就着这两年各个大厂对高龄程序员的种种限制,我们再来谈一谈,为什么我建议大家如果要走技术路线,就一定要进中大厂走技术专家的路线。记得帮我点赞哦。一、大厂裁员,为什么优先35岁以上?大道理总是无力的,先讲几个事实吧。为了避免不必要的.

    2022年7月17日
    16
  • c#通过oledb获取excel文件表结构信息

    这个问题来自论坛提问,同理可以获得access等数据库的表结构信息。推荐:http://www.cnblogs.com/roucheng/p/excelhanshu.html

    2021年12月27日
    39
  • Oracle 异常详解(exception)

    Oracle 异常详解(exception)Oracle异常详解(exception)来源:(33条消息)Oracle异常详解(exception)_鱼丸丶粗面-CSDN博客鱼丸丶粗面2018-10-0823:03:232949

    2022年7月2日
    27
  • linux内核编译详解[通俗易懂]

    linux内核编译详解[通俗易懂]前言Linux内核是Linux操作系统的核心,也是整个Linux功能体现的核心,就如同发动机在汽车中的重要性。内核主要功能包括进程管理、内存管理、文件管理、设备管理、网络管理等。Linux内核是单内核设计,但却采用了微内核的模块化设计,支持内核线程以及动态装载内核模块的能力。Linux作为一个自由软件,在广大爱好者的支持下,内核版本不断更新。新的内核修订了旧内核的bug,并增加了许多新的特性。如果…

    2022年7月23日
    9
  • ubuntu的ssh连不上_ubuntu网络连接没有显示出来

    ubuntu的ssh连不上_ubuntu网络连接没有显示出来之前发在其他的博客上的,现在移动以下位置之前的链接:http://blog.chinaunix.net/uid-69944074-id-5831708.html(原创文章)使用Ubuntu,经常需要需要SSH远程连接,但是有时候会出现问题,难以捉摸,下面参考别人的,在结合自己的尝试总结下吧。服务器配完ubuntu系统以及LNMP环境以后,想用WINSCP远程登录,就需要开启SSH服务才能支持。SSH服务分为客户端和服务器。顾名思义,我想用putty远程登录Ubuntu服务器,所以需要安装SSH s

    2022年8月8日
    6

发表回复

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

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