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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/109367.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 2019美赛A题—学习记录

    2019美赛A题—学习记录2019美赛a题论文来源:https://github.com/MATHmodelsAbstract【废话干货1:9开】一句话引入概述问题-概述方法-概述结果【三个模型,模型分析因素,解决的问题】灵敏度分析【修改参数看影响】一句话意义Introduction1.问题重述原问题问题A:生态博弈在虚构的电视连续剧《权力的游戏》中,以史诗幻想小说《冰与火之歌》系列…

  • 一张图说明–桥接模式与NAT模式的差别「建议收藏」

    一张图说明–桥接模式与NAT模式的差别「建议收藏」不废话,直接上一张简单清晰的对比图桥接模式里虚拟机中的虚拟网络适配器可通过主机中的物理网络适配器直接访问到外部网络。如上图所示的局域网中添加了一台新的、独立的计算机一样。宿主机与vm虚拟机是平级关系。因此,虚拟机也会占用局域网中的一个IP地址,并且可以和其他终端进行相互访问…

  • javaScript中创建数组的3种方式

    javaScript中创建数组的3种方式javaScript中创建数组的3种方式,直接上代码和截图

  • 编写程序计算1~10的平方和_用指针比较两个数大小

    编写程序计算1~10的平方和_用指针比较两个数大小给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c 。示例 1:输入:c = 5输出:true解释:1 * 1 + 2 * 2 = 5示例 2:输入:c = 3输出:false示例 3:输入:c = 4输出:true示例 4:输入:c = 2输出:true示例 5:输入:c = 1输出:true提示:0 <= c <= 231 – 1题解双指针,注意整形溢出class Solution {public

  • 面向对象和面向过程的区别理解_c是面向对象还是面向过程

    面向对象和面向过程的区别理解_c是面向对象还是面向过程一、面向对象和面向过程面向对象面向过程编程是一种以过程为中心的编程思想,分析出解决问题的步骤,然后用函数把这些步骤一步一步实现。面向过程编程,数据和对数据的操作是分离的,函数本身只

  • C语言位运算符_C语言左移和右移的区别

    C语言位运算符_C语言左移和右移的区别如果你想了解以下位运算符的话我想你来对了地方&^|~<<>>首先明确位运算符都是在二进制位上运算的先讲比较简单的<<>>(有些人可能认为这个最难以理解包括我)后来我陡然一时想到了十进制左移“<<”右移“>>”十进制10左移三位就是乘以10的3次方=1000010右…

发表回复

您的电子邮箱地址不会被公开。

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