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. Win7下 IIS+PHP（ZendLoader）+MySQL

    这里使用的是傻瓜式安装方式 下载php-5.3.18-nts-Win32-VC9-x86.msi,Win7下可执行文件.(下载地址 http://pan.baidu.com/s/1qvJCA) 执行到 ...

  2. [转] WebService开发笔记 1 -- 利用cxf开发WebService竟然如此简单

    以下文章来自   http://www.blogjava.net/jacally/articles/186655.html 现在的项目中需要用到SOA概念的地方越来越多,最近我接手的一个项目中就提出了 ...

  3. SQLite Lemon 语法分析器学习与使用

    本文是浙江大学出版社的<LEMON语法分析生成器(LALR 1类型)源代码情景分析>学习笔记. 用到的Windows下的编译器介绍MinGW(http://www.mingw.org/): ...

  4. Linux 环境编译安装mysql (源码安装包)

    标注: Linux需要先配置网络yum源,确定yum能在线安装软件包,方便测试过程中安装部分依赖包.配置163网易提示的网络yum源参考博客  http://www.cnblogs.com/zoulo ...

  5. html元素被隐藏在后面

    当有些html元素是由于某些控件生成的,然后它被隐藏在其他元素的后面,但是它一开始是隐藏的,你无法直接在html或js里修改它的属性:z-index,使其可以放在更前面,这时可以在css里重新定义控件 ...

  6. 批量删除ASP.NET中的缓存(cache)

    IDictionaryEnumerator em = HttpContext.Current.Cache.GetEnumerator(); while (em.MoveNext())        { ...

  7. POJ 2373 Yogurt factory

    简单DP. 这周所用的实际花费是上一周的花费+S与这周费用的较小值. #include<cstdio> #include<cstring> #include<cmath& ...

  8. FZU 1397 保送

    网络流入门题. 源点到每一个学生连一条边,容量为1 每个学校到汇点连一条边,容量为L 符合要求的学生和学校之间连边,容量为1. 从源点到汇点的最大流就是答案. #include<cstdio&g ...

  9. mysql数据库中间件研究

    随着互联网的发展,数据量的不断增大. 单台实例已经远远无法满足业务的需要. 对数据库分库分表的需求不断的增加随之而来的就是数据库中间件的开发. 一. 单台实例主要面临下面几个问题: 1.  数据量太大 ...

  10. 【转】进程间通信方式总结（windows 和linux）

    平时看的书很多,了解的也很多,但不喜欢总结,这不昨天面试的时候被问到了进程间通信的方式,因为没有认真总结过,所以昨天答得不是特别好.现在将linux和windows的进程间通信方式好好总结一下.    ...