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. UIStackView 简单使用

    UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合.对于嵌入到StackView的视图,你不用再添加自动布局的约束了.Stack View管理这些子视图的布局,并帮你自动布局约束. ...

  2. 使用 Cloud Insight SDK 监控北京空气质量！

    现在越来越多的 App 都开始有广告了.特别是空气质量监测,和天气类的 App,广告还是蛮多的,眼花缭乱,真是够了. 最近刚好在用一款系统监控工具 Cloud Insight,它提供的 SDK 可以把 ...

  3. 【UVA 11383】 Golden Tiger Claw （KM算法副产物）

    Omi, Raymondo, Clay and Kimiko are on new adventure- in search of new Shen Gong Wu. But EvilBoy Geni ...

  4. 使用solrj进行DIH操作

    背景说明:在一个项目中需要将Mongodb中的数据导入到solr中完成搜索.在solr中Mysql数据库有对应的DIH包,可以通过配置sql语句完成数据的导入.Mongodb下也有开源的工具用来实现数 ...

  5. Android用户界面 UI组件--AdapterView及其子类(二) AdapterViewAnimator及其子类

    AdapterViewAnimator:当在视图间切换时会显示动画. android:animateFirstView 定义ViewAnimation首次显示时是否对当前视图应用动画. android ...

  6. 还能输入多少字？(JS动态计算)

    <div class="m-form ovh"> <div class="hd"> <span class="fr&qu ...

  7. .NET+Oracle 分页

    http://www.cnblogs.com/Jusoc/archive/2011/08/28/2156530.html#commentform .在oracle的sqlplus或其他工具中运行一下p ...

  8. 今天遇到的i++问题之记录

    今天逛贴吧看到的,与自己预想的不同,于是在群里求解后方得知答案,遂记录之.代码来袭. function a(){ var i=1; i++; alert(i); } var c = a(); c(); ...

  9. HDOJ/HDU 1328 IBM Minus One(水题一个，试试手)

    Problem Description You may have heard of the book '2001 - A Space Odyssey' by Arthur C. Clarke, or ...

  10. ReentrantLock Condition 实现消费者生产者问题

    import java.util.LinkedList; import java.util.Queue; import java.util.concurrent.ExecutorService; im ...