zoukankan      html  css  js  c++  java
  • 奇偶选择器

    一、奇偶选择器

          表格在呈现数据的时候我们为了方便观看,而隔行显示不同的颜色,虽然可以用用类选择器 class实现这种效果,但是未免太过麻烦,为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器,这就是奇偶选择器。

    二、奇偶选择器的样式

    • 前面通常是一个标签或是其他类型的名字;
    • 后面冒号  :  隔开,然后  n  表示第  n  个,child 表示子元素;
    • child 后面跟着一对括号( ),这个括号里表示究竟是第几个元素;
    • 里面可以是一个数字或者是 odd(奇数个元素)  或者是 even(偶数个元素)
    • 括号后面是大括号 {  } ,可以在里面放上背景颜色样式;
    • odd 是单行  
    • even是双行  

    三、奇偶选择器的应用

    奇偶选择器】使用oddeven属性,具体写法如下所示:

    • <style type="text/css">
    •  tr:nth-child(odd) {.... }
    • table tr:nth-child(even) { .... }
    • </style>
    • <table>
    •   <tr><td>...</td></tr>
    •   <tr><td>...</td></tr>
    •   <tr><td>...</td></tr>
    •   <tr><td>...</td></tr>
    • </table>

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

    n 可以是数字、关键词或公式。

    使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。

    在这里,我们指定了下标是 3 的倍数的所有 p 元素的背景色:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    p:nth-child(3n+0)
    {
    background:#ff0000;
    }
    </style>
    </head>
    <body>
    <p>第一个段落。</p>
    <p>第二个段落。</p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>
    <p>第六个段落。</p>
    <p>第七个段落。</p>
    <p>第八个段落。</p>
    <p>第九个段落。</p>
    </body>
    </html>

     

  • 相关阅读:
    史上最强内网渗透知识点总结
    最全的网站渗透测试详细检测方法
    java代码审计
    信息收集
    Java Web安全之代码审计
    Bell-Lapadula和Biba的改进安全模型与应用
    浅谈Forrester零信任架构评估的7个技术维度
    CMD命令混淆高级对抗
    一篇文章带你领悟Frida的精髓(基于安卓8.1)
    svg作图
  • 原文地址:https://www.cnblogs.com/niuyaomin/p/11443852.html
Copyright © 2011-2022 走看看