DOM hierarchy pseudo-classes allow you to style specific elements based on where they fall in the hierarchy and what type of elements they are. You can also use :nth-child to target custom element patterns, like every other element.

<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>GistRun</title>

  <link rel="stylesheet" href="styles.css">

      <style>

        ul {

            list-style: none;

            margin: 0;

            padding: 0;

        }

        li {

            padding: 5px;

        }

        /*    li:first-child {

                background-color: rgb(225, 231, 252);

            }

            li:last-child {

                background-color: rgb(225, 231, 252);

            }

            li:nth-child(2) {

              background-color: rgb(225, 0, 252);

            }*/

        /* The even child*/

        /*li:nth-child(2n) {

            background-color: gold ;

        }*/

        /* The odd child*/

        /*li:nth-child(2n+1) {

            background-color: darkred;

        }*/

        /* First 4 children */

        li:nth-child(-n+4) {

            background-color: cadetblue;

        }

        /* Expect first three children*/

        li:nth-child(n+4) {

            background-color: lightgoldenrodyellow;

        }

        /* Other psuedo classes:

        * :nth-last-child

        * :only-child

        * :only-of-type

        * :last-of-type

        * :nth-of-type(an+b)

        * :nth-last-of-type(an+b)

        */</style>

</head>

<body>

  <ul>

    <li><a href="#" target="_blank">target=_blank</a></li>

    <li><a href="#" target="someFrame">target=someFrame</a></li>

    <li><a href="#" rel="link-blog">rel=link-blog</a></li>

    <li><a href="#" rel="linkproducts">rel=linkproducts</a></li>

    <li><a href="#" rel="link about">rel=link about</a></li>

    <li><a href="#" rel="link-about" title="special">rel=link-about title=special </a></li>

    <li><a href="#" rel="link-other" title="special">rel=link-other title=special </a></li>

    <li><a href="#" rel="this item available now">rel=this item available now</a></li>

    <li><a href="#" rel="product-200-available-now">rel=product-200-available-now</a></li>

    <li><a href="#" rel="linkproductavailable300">rel=linkproductavailable300</a>

    <li><a href="#" rel="sale-product-400">rel=sale-product-400</a></li>

    <li><a href="#" rel="sale">rel=sale</a></li>

    <li><a href="#" rel="product-500-discontinued">rel=product-500-discontinued</a></li>

    <li><a href="#" rel="product600discontinued">rel=product600discontinued</a></li>

    <li><a href="#" rel="discontinued">rel=discontinued</a></li>

</ul>

  <script src="script.js"></script>

</body>

</html>

[CSS] DOM Hierarchy Pseudo Classes :first-child :last-child :nth-child (demystified)的更多相关文章

  1. 【CSS】Intermediate2:Pseudo Classes

    1.specify a state or relation to the selector selector:pseudo_class { property: value; } 2.Link 3.Dy ...

  2. CSS pseudo classes All In One

    CSS pseudo classes All In One CSS 伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes ...

  3. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  4. [CSS3] Define Form Element States with CSS Form Pseudo Classes

    Using just semantic CSS Pseudo-Classes you can help define important states for form elements that e ...

  5. [CSS3] Identify Interactive HTML Elements with CSS Link Pseudo Classes

    The interactive pseudo-classes for links (and buttons) allow us to make sure the user knows what ele ...

  6. [CSS] The :empty Pseudo Selector Gotchas

    The :empty pseudo selector selects empty elements. We can use this to display useful messages instea ...

  7. Html,Css,Dom,javascript细节总结

    最近愈发觉得基础的重要性,细节决定成败,所以希望能够将自己注意到的搜集到的一些关于前端的小细节小知识整理出来,更好的方便自己记忆回顾. 1.在构建网页Html框架时,尽量只给外层标记(即是父标记)定义 ...

  8. 【CSS】Intermediate7:Pseudo Elements

    1.selector:pseudo element{property:value;} 2.first-letter  first-line CSS3:: 与pseudo class 区别 old br ...

  9. html+css+dom补充

    补充1:页面布局 一般像京东主页左侧右侧都留有空白,用margin:0 auto居中,一般.w. <!DOCTYPE html> <html lang="en"& ...

随机推荐

  1. C图书借还示例

    以后要搞C了先自己练习一下,系统本身没有太大的实际用途,只是用来磨练编程规范,不足之处还望大家多多指正 .互相交流共同进步. 为了方便只使用了一个 book.c 文件,在vc6 下编译通过,其他编译器 ...

  2. 移动应用产品开发-android开发（二）

    这段时间实在太忙了,也没什么精力来写博客,还是没养成写博客的习惯,还是得记载下来,不然时间久了就忘记了. 早上一大早就来公司了,趁还早,拟定今天的工作内容和计划后,赶紧记载点东西. 最近做androi ...

  3. 李洪强iOS开发Swift篇—01_简单介绍

    李洪强iOS开发Swift篇—01_简单介绍 一.简介 Swift是苹果于2014年WWDC(苹果开发者大会)发布的全新编程语言 Swift在天朝译为“雨燕”,是它的LOGO 是一只燕子,跟Objec ...

  4. ANDROID_MARS学习笔记_S02_013_Gson解析json串

    1.MainActivity.java package com.json; import java.io.IOException; import java.io.StringReader; impor ...

  5. QWidget属性，函数的学习

    我把所有属性重新按功能排了一遍,这样才能灌到自己脑子里,并且方便自己以后查找: -------------------- 颜色/渲染方式 -----------------------QWidget: ...

  6. SectionIndexer中的getSectionForPosition()与getPositionForSection()

    大家在做字母索引的时候常常会用到SectionIndexer这个类,里面有2个重要的方法 1.   getSectionForPosition()通过该项的位置,获得所在分类组的索引号 2. getP ...

  7. centos 6.4 大容量磁盘分区步骤

    首先安装分区工具 yum install parted 假设需要分区的设备为/dev/sdb 运行如下命令 parted /dev/sdb (parted) mklabel gpt #大于2TB的磁盘 ...

  8. android学习——环境搭建之HelloWorld

    一.在开始Android开发之旅启动之前,首先要搭建环境,然后创建一个简单的HelloWorld.本文的主题如下: 1.1.JDK安装 1.2.Eclipse安装 1.3.Android SDK安装 ...

  9. Remarks on a preprint

    Page 2 Line 1, "reads" should be "read". Page 2 Line 5, "are initial veloci ...

  10. HDOJ -- 4699

    Editor Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Su ...