1、选择器first-child、last-child、nth-child和nth-last-child

利用first-child、last-child、nth-child和nth-last-child能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或者第奇数个子元素进行样式的指定。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--first-child-->
     <style>
         li:first-child{
             background-color: orange;
         }
      /*last-child   */
         li:last-child{
             background-color: red;
         }
         /*nth-child(position)*/
         li:nth-child(3){
             background-color: aqua;
         }
         /*nth-last-child() 从下往上数*/
         li:nth-last-child(2){
             background-color: gold;
         }
         /*li:nth-last-child(odd) 给奇数加效果*/
         /*li:nth-last-child(even) 给奇数加效果*/
     </style>
 </head>
 <body>
     <h2>列表</h2>
     <ul>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
         <li>列表6</li>
     </ul>
 </body>
 </html>

2、选择器nth-of-type和nth-last-of-type

在CSS3中，通过选择器nth-of-type和nth-last-of-type，来避免选择元素时，会把子元素的个数也计算在内。使用这两个选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*以下是连同父级标签和子元素一同计算了*/
         /*h2:nth-child(odd){*/
             /*background-color: gold;*/
         /*}*/

         h2:nth-of-type(even){
             background-color: green;
         }
     </style>
 </head>
 <body>
     <h2>文章标题</h2>
     <p>文章正文</p>
     <h2>文章标题</h2>
     <p>文章正文</p>
     <h2>文章标题</h2>
     <p>文章正文</p>
     <h2>文章标题</h2>
     <p>文章正文</p>
 </body>
 </html>

3、nth-child和only-child选择器

nth-child选择器：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <!--
         nth-child(n)
         an+β
     -->
     <style>
         li:nth-child(4n+1){
             background-color: gold;
         }
         li:nth-child(4n+2){
             background-color: darkgreen;
         }
         li:nth-child(4n+3){
             background-color: red;
         }
         li:nth-child(4n){
             background-color: blue;
         }
     </style>
 </head>
 <body>
     <ul>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表1</li>
         <li>列表2</li>
         <li>列表3</li>
         <li>列表4</li>
     </ul>
 </body>
 </html>

only-child选择器：

 <!doctype html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <style>
         /*以下语句，列表1，2和3都会被改变颜色*/
         /*li:nth-child(1){*/
             /*background-color: aqua;*/
         /*}*/
         /*以下语句，只有列表1和2会被改变颜色*/
         /*即只有1个子元素时，会起作用*/
         li:only-child{
             background-color: gold;
         }
     </style>
 </head>
 <body>
     <ul>
         <li>列表1</li>
     </ul>
     <ul>
         <li>列表2</li>
     </ul>
     <ul>
         <li>列表3</li>
         <li>列表4</li>
         <li>列表5</li>
     </ul>
 </body>
 </html>

[CSS3] 学习笔记-选择器详解（二）的更多相关文章

  1. [CSS3] 学习笔记-选择器详解（三）

    1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...

  2. CSS3 基础(1)——选择器详解

    CSS3选择器详解 一. 属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val].[att^=val]和[att$=val],使得属性选择器有了通配符的概念. 选择器 示例 描述 ...

  3. JavaScript学习笔记-实例详解-类（二）

    实例详解-类(二)   //===给Object.prototype添加只读\不可枚举\不可配置的属性objectId(function(){ Object.defineProperty(Object ...

  4. Angular6 学习笔记——组件详解之组件通讯

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  5. Angular6 学习笔记——组件详解之模板语法

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  6. Angular6 学习笔记——路由详解

    angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net ...

  7. JavaScript学习笔记-实例详解-类（一）

    实例详解-类(一): //每个javascript函数(除了bind())都自动拥有一个prototype对象// 在未添加属性或重写prototype对象之前,它只包含唯一一个不可枚举属性const ...

  8. Android学习笔记-Dialog详解

    1.对话框的使用 1.1AlertDialog的显示 简单对话框以及监听的设置:重点掌握三个按钮(也就是三上单词): PositiveButton(确认按钮);NeutralButton(忽略按钮) ...

  9. C++并发与多线程学习笔记--unique_lock详解

    unique_lock 取代lock_quard unique_lock 的第二个参数 std::adopt_lock std::try_to_lock std::defer_lock unique_ ...

随机推荐

  1. The Willpower Instinct

    https://book.douban.com/subject/7043452/ 1.冥想2.健康饮食(低GI.素食为主,未加工食物为主).低GI食物使血糖稳定(蛋白.麦片.粗纤谷类.豆类.水果蔬菜) ...

  2. 关于bool和BOOL的区别

    1.类型不同: BOOL是int类型,bool是布尔类型 2.长度不同: BOOL长度是其环境来定,一般是4个字节,因为其是int类型;bool长度为一个字节 3.取值不同: BOOL取值是FALSE ...

  3. scp命令和sftp命令

    scp帮助命令: man scpscp功能:下载远程文件或者目录到本地,如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择.从远程主机下载东西到本地电脑拷贝文件命令 scp us ...

  4. 推荐几个web中常用js图表插件

    作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph flot js charts jqchart elycharts jquery ...

  5. LPC2478内存布局以及启动方式

    LPC2478 是NXP公司推出的一款基于APR7TDMI-S的工控型MCU,内置RAM与flash,同时提供外部扩展flash和ram接口,拥有LCD控制器,其内存布局如下所示 其中Flash高达5 ...

  6. Phplot--一些记录

    1.一张图片画俩次 需要设置 $phplot->SetPrintImage(0); 参考  http://www.phplot.com/phplotdocs/ex-twoplot1.html

  7. xml数据传输

  8. sql语句：CASE WHEN END 的用法

    select b,c, CASE a ' ' ' end from test1

  9. 微软2017MVP大礼包拆箱攻略

    容我本周偷个懒,晒个大礼包就糊弄过去了.13号晚上拿到的大礼包,激动的没敢拆,一直等到娃睡着了,才偷偷打开了快递,忍了两天没忍住,上来晒图得瑟一下,请各位轻拍,谢谢! 1.大礼包的盒子(联邦快递的盒子 ...

  10. MyEclipse 修改项目字符集

    项目->右键+properties->Resource->Text file container->others->utf-8