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. express4.x中路由中间件和挂载路径的关系

    express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...

  2. Cookie的格式及组成

    转自:http://blog.csdn.net/talking12391239/article/details/9665185 Cookie由变量名和值组成,类似JavaScript变量.其属性里既有 ...

  3. UVa11555 - Aspen Avenue

    今晚CF GYM A题,神坑.. 原题: Aspen Avenue ``Phew, that was the last one!'' exclaimed the garden helper Tim a ...

  4. tp框架链接数据库的基本操作

    <?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { ...

  5. 51驱动LCD1602

    1602 采用标准的 16 脚接口,其中: 第 1 脚:VSS 为地电源 第 2 脚:VDD 接 5V 正电源 第 3 脚:V0 为液晶显示器对比度调整端,接正电源时对比度最弱,接地 电源时对比度最高 ...

  6. Spring Junit 读取WEB-INF下的配置文件

    假设Spring配置文件为applicationContext.xml 一.Spring配置文件在类路径下面 在Spring的java应用程序中,一般我们的Spring的配置文件都是放在放在类路径下面 ...

  7. CSS 弹性盒子布局

    学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

  8. Unity3D ——强大的跨平台3D游戏开发工具（六）

    第十一章 制作炮台的旋转 大家知道,炮台需要向四周不同的角度发射炮弹,这就需要我们将炮台设置成为会旋转的物体,接下来我们就一起制作一个会旋转的炮台. 第一步:给炮台的炮筒添加旋转函数. 给炮台的炮筒部 ...

  9. 使用 System.Transactions 进行事物管理

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  10. Python3基础 用 while循环实现 斐波那契数列

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...