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

2024-01-17 15:43 小编
  如何使用nth-of-type?
 
  我们先来看看nth-of-type的具体描述,注意“:”(冒号)在“nth-of-type(2n)”之前附加。
 
  li:nth-of-type(2n){
 
  }
 
  ()内的“n”表示的是第几位,“2n”则表示是其是2的倍数
 
  你还可以指定其他的数,比如“3n+1”、“odd”、“even”等。
 
  我们来看一个具体的示例
 
  代码如下
 
  HTML代码
 
  
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title>CSSnth-of-type</title>
 
  <linkrel="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%;
 
  }


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码