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. 关于iOS性能调优

    性能调优一直都是作为高阶iOS开发者的一个入门门槛,下面我搜集了日常查阅资料中见到的各种高质量调优博文,仅供参考 UIKit性能调优实战讲解 iOS 高效添加圆角效果实战讲解

  2. Cocos2dx 3.1.1 学习笔记整理(2):创建场景与载入图片

    把之前用2.2.3的代码迁移到3.1.1真是个蛋疼的工作,话说3.1.1做的改动还真是大啊. 可以在HelloWorldScene.cpp中看到,之前的各种CCXXX都被废弃了. 例如,新建一个CCL ...

  3. （译）Windsor入门教程---第二部分 引用Windsor

    原文:http://docs.castleproject.org/Windsor.Windsor-tutorial-ASP-NET-MVC-3-application-To-be-Seen.ashx ...

  4. Centos rsync文件同步配置

    一.服务器端配置: # yum -y install xinetd   CentOS默认已经安装了rsync 服务.. 输入 rsync 命令可查看是否安装.   # vi /etc/xinetd.d ...

  5. mysql用存储过程插入百万条数据, 及查询优化

    查看所有存储过程: show procedure status; 查看详细存储过程 ptest: show create procedure ptest; 存储过程插入数据: create table ...

  6. Led控件

    在 WindowMobile 上的模拟LED 显示屏插件 一个简单Led控件 一个经典的控制Led的单片机程序 Led控件(2)——Led显示屏模拟

  7. HTML5离线应用与客户端存储

    序言 本篇文章会详细介绍使用HTML5开发离线应用的步骤,以及本地存储与cookie的一些异同,最后利用上面所学例子来实现一个购物车场景. 使用HTML5离线存储的基本过程如下: 离线检测:首先要对设 ...

  8. Sublime Text 快捷键--持续更新

    快捷键 功能 说明 ctrl+D 选取一个单词连续按组合键会选择页面所有相同的这个单词   ctrl+Z 撤销上一个操作   ctrl+Y 恢复上一个操作   ctrl+shift+F 底部打开搜索全 ...

  9. css中的单位

    一.相对长度单位: 相对长度是根据与其他事物的关系来度量的.共有3种相对长度单位:em,ex,px. 1个“em”定义为一种给定字体的font-size的值,例如,一个元素的font-size为14像 ...

  10. 建立ipython集群

    启动controller ipcontroller -- ip = ipaddress 设置ssh免登陆 因为需要分发文件,采用ssh通信,所以需要配置ssh免登陆 分发配置文件 scp contro ...