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. Discuz <= 7.2 SQL注入漏洞详情

    在<高级PHP应用程序漏洞审核技术>[1]一文里的"魔术引号带来的新的安全问题"一节里,有 提到通过提取魔术引号产生的“\”字符带来的安全问题,同样这个问题在这里又一次 ...

  2. EasyUI 树形菜单tree 定义图标

    { "id":1, "text":"Folder1", "iconCls":"icon-save", ...

  3. Android 连接tomcat模拟登陆账号

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  4. LifecycleProcessor not initialized - call 'refresh' before invoking lifecycle methods via the contex异常的原因

    eclipse里面启动tomcat报这个错误的原因是由于jar包冲突了,在我的项目里面引入了jar包,但是我的工程里面有这个jar包的两个工程,都被导入到同一个项目里面了,导致不知道该去用哪一个类,所 ...

  5. AFN演示

  6. python3使用requests爬取新浪热门微博

    微博登录的实现代码来源:https://gist.github.com/mrluanma/3621775 相关环境 使用的python3.4,发现配置好环境后可以直接使用pip easy_instal ...

  7. PLSQL调用webservice

      1.   用途简介 为什么要在Oracle中访问WebService?在系统实现中,有时会有直接在数据库端利用触发器.存储过程等方式进行数据传递.分发的业务,而其中可能会涉及一些业务逻辑,为了处理 ...

  8. ADO.NET 增删查改小总结

    转自:http://www.cnblogs.com/ashu123/archive/2010/10/10/ado_1.html 三套路-----增删改 1 using System.Data.SqlC ...

  9. yml文件数据的简洁表达方法（Hashes to OpenStruct）

    通过ruby编写测试脚本的时候,我还是喜欢采用yml来管理测试数据,就像以前的文章(Selenium WebDriver + Grid2 + RSpec之旅(五))提到的一样,但是在引用yml中的数据 ...

  10. Apache.NMS.Stomp 下载

    最近项目中有用到ActiveMQ, MQ服务器61613的端口是用的STOMP协议, 原来项目中有使用MQ, 但发现缺少Apache.NMS.Stomp.dll的引用,于是上官网上找,结果发现所有的A ...