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. windows2003 IIS6 部署MVC3和MVC4程序

    1.服务器上安装SP2 和 IIS6 2.安装.Net Framework3.5 SP1(完整安装包,包含2.0 2.0SP1,237MB那个安装包) 3.安装.Net Framework4.0 4. ...

  2. keystone policy.json 的学习总结

    keystone的policy.json文件位于:/etc/keystone/policy.json 其内容如下: 1 { 2 "admin_required": "ro ...

  3. CodeForces 620B Grandfather Dovlet’s calculator

    水题 #include<cstdio> #include<cstring> #include<cmath> #include<stack> #inclu ...

  4. STM32应用笔记转载

    stm32 外部中断嵌套[操作寄存器+库函数] stm32 NVIC中断管理实现[直接操作寄存器] stm32 SPI通信[操作寄存器+库函数] stm32 i2c通信 [操作寄存器+库函数] stm ...

  5. windows下使用waveout函数族播放wav文件

    要使用waveout函数组,族,首先要知道几个数据结构,首先是这个 typedef struct tWAVEFORMATEX { WORD wFormatTag; /* 格式的类型 */ WORD n ...

  6. octave之奇巧淫技向量化计算实现寻找样本点所属聚类下标

    前面有文章提到过,K-means算法,第一步骤是找出样本点的的所属聚类.下面用两种方式实现,一种是普通的循环,一种是完全向量化计算. 假设 : X 是m×n样本矩阵,其每一行是一个样本,m表示样本数目 ...

  7. 在阿里云ECS（CentOS6.5）上安装ftp

    安装vsftpd 命令: yum install vsftpd –y 结果: 创建ftp存取文件的目录,用户名,密码 命令: useradd -d /home/ftp -g ftp -s /sbin/ ...

  8. [转]六款常用的linux C/C++ IDE

    之前在windows下开发习惯啦,linux改用vim开发代码,但是前期还是不熟悉看代码效率感觉有点低.由于看代码需要各种跳转查找我个人觉得还是IDE方便些,以前在windows下就挺喜欢使用code ...

  9. 自然语言处理高手_相关资源_开源项目（比如：分词,word2vec等）

    (1) 中科院自动化所的博士,用神经网络做自然语言处理:http://licstar.net (2) 分词项目:https://github.com/fxsjy/jieba(3) 清华大学搞的中文分词 ...

  10. MVC笔记3:JQuery AutoComplete组件

    1.引入以下js和css <link href="@Url.Content("~/Content/Site.css")" rel="styles ...