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. HTML -- 元素和属性

    HTML -- 元素 HTML元素是从开始标签到结束标签之间的代码,如: <!-- 加粗标签 --> <b>一些元素</b> <!-- 换行 --> & ...

  2. Xcode 修改工程名称

    总会遇到几个项目,在做到一半的时候被要求改项目名,网上找了下相关的资料,大多数是xcode5以前的版本,所以解决好了在这里mark一下,给需要的人. 目标为:将项目名XCD4改成xcd5. 先上结果图 ...

  3. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

  4. C++的数据类型

    C++的数据类型 计算机处理的对象是数据,而数据是以某种特定的形式存在的(例如整数.浮点数.字符等形式). 不同的数据之间往往还存在某些联系(例如由若干个整数组成一个整数数组).数据结构指的是数据的组 ...

  5. C# XML与对象互相转换

    using System; using System.Collections.Generic; using System.Text; using System.Xml.Serialization; u ...

  6. BZOJ 1620: [Usaco2008 Nov]Time Management 时间管理

    Description Ever the maturing businessman, Farmer John realizes that he must manage his time effecti ...

  7. JQ模仿select

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. [转贴] C++ 判断主机是否处于联网状态下

    直接让本机访问一个网站,如果成功的话,就说明成功联网,没有访问成功,则说明没有联网!!! #include<iostream> #include <WINSOCK2.H> #p ...

  9. ASP.NET MVC 解决LINQ表达式中的SqlMethods 未找到命名空间问题

    右键项目属性下的引用: 添加引用: 搜索寻找——System.Data.Linq,然后添加成功,即可解决LINQ表达式中的SqlMethods 未找到命名空间问题

  10. Properties vs. Attributes

    http://blogs.msdn.com/b/ericlippert/archive/2009/02/02/properties-vs-attributes.aspx Here is yet ano ...