首页 / css教程

    CSS中的nth-of-type如何使用

    类型:原创      发布者:不言2018-12-07 15:17:30

    nth-of-type是一个获取一些适用项并应用样式的属性,它是从CSS 3添加的CSS选择器之一,:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素,本篇文章我们就来具体说一下nth-of-type的用法。

    css

    如何使用nth-of-type?

    我们先来看看nth-of-type的具体描述,注意“:”(冒号)在“nth - of - type(2n)”之前附加。

    li:nth-of-type(2n){
     }

    ()内的“n”表示的是第几位,“2n”则表示是其是2的倍数

    你还可以指定其他的数,比如“3n+1”、“odd”、“even”等。

    我们来看一个具体的示例

    代码如下

    HTML代码

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>CSS nth-of-type</title>
        <link rel="stylesheet" type="text/css" href="sample.css">
      </head>
      <body>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
        </ul>
      </body>
    </html>

    CSS代码

    sample.css

    li:nth-of-type(2n){
      color: #5bc0de;
    }
    
    li{
      margin: 10px;
      font-size: 120%;
    }

    页面上将显示如下效果,你会看到2的倍数的颜色都变成了蓝色。

    CSS

    本篇文章到这里就全部结束了,更多相关的精彩内容可以移步到php中文网的CSS视频教程CSS3视频教程栏目进一步的学习!!!

    以上就是CSS中的nth-of-type如何使用的详细内容,更多请关注php中文网其它相关文章!

php中文网赞助会员

PHP中文网

未登录