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. bootstrap兼容IE8 解决办法

    bootstrap有使用CSS3,所以ie9以下浏览器不会很顺畅.IE9以下的兼容性不是很好.IE本身就是怪胎,就搞一些和外界标准不一致.搞得web开发考虑这考虑那的兼容性,蛋疼! 基本上css3的没 ...

  2. JQuery自学代码---（一）

    /** * Created by wyl on 15-3-4. */ //Jquery是一个JavaScrioe库,它极大的简化了JavaScript编程 $(document).ready(func ...

  3. 两台CISCO2691测试静态路由汇总，浮动静态路由和负载分担静态路由配置

    Dynagen的配置文件内容: #Lab - autostart = False [localhost] [[]] ram = image = C:\Program Files (x86)\Dynam ...

  4. Jquery UI dialog 传参

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3519318.html] $("#dialog").dialog({ aut ...

  5. 【Java基础01】Java InputStream的read方法

    JDK关于InputStream中的read方法的描述: (1) read() :  从输入流中读取数据的下一个字节,返回0到255范围内的int字节值.如果因为已经到达流末尾而没有可用的字节,则返回 ...

  6. Learning WCF Chapter2 Messaging Protocols

    In Chapter 1,you were introduced to fundamental WCF concepts,      在章节1中,学习了wcf中的基础概念including how t ...

  7. jQuery选择器上下文

  8. 30个最常用css选择器解析

    转自:http://www.cnblogs.com/yiyuanke/archive/2011/10/22/CSS.html 你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远 ...

  9. HNOI 2008：水平可见直线

    Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为 可见的,否则Li为被覆盖的. 例如,对于直线: L1:y ...

  10. Java正则表达式应用总结

    http://lavasoft.blog.51cto.com/ http://lavasoft.blog.51cto.com/62575/179324      Java正则表达式应用总结   一.概 ...