nth-childのいくつかの小さな試み

7259 ワード
HTML\CSS
nth-childのいくつかの小さな試み
前言
first-childあるいはlast-childなどに対して、比較的によく使われる.しかしnth-childは一般にインターレースで変色する.それがどれほど強力な機能を持っているかは考えられず、鶏の肋骨を比較しているとさえ考えられている.
しかし今日深く研究してみると、この商品は少し半星の強さではないことがわかりました!!!くだらないことを言わないで、直接コードをつけます
code 

<html>
<head>
    <meta charset="UTF-8">
    <title>nth-child testtitle>
head>
<body>
    <ul>
        <li>this is title 1li>
        <li>this is title 2li>
        <li>this is title 3li>
        <li>this is title 4li>
        <li>this is title 5li>
        <li>this is title 6li>
        <li>this is title 7li>
        <li>this is title 8li>
        <li>this is title 9li>
        <li>this is title 10li>
        <li>this is title 11li>
        <li>this is title 12li>
        <li>this is title 13li>
        <li>this is title 14li>
        <li>this is title 15li>
        <li>this is title 16li>
        <li>this is title 17li>
        <li>this is title 18li>
        <li>this is title 19li>
        <li>this is title 20li>
    ul>
body>
html>
<style>
    li:nth-child(1){background: #fda;}
    li:nth-child(3n){background: #daf;}
    li:nth-child(-n+4) {font-weight: bold;}
    li:nth-child(5n){border-bottom: 1px solid #ddd;padding-bottom: 20px;margin-bottom: 20px;}
    li:nth-child(n+5) {text-indent: 10px;}
    li:nth-child(3n+1) {color: #f00;}
    li:nth-child(3n-1) {color: #00f;}
style>

あまりにTM柔軟で、後でこのような地方、まったくclassをプラスする必要はありません!!!
詳細
精通:nth-child nth-childに関する疑惑w 3 school:CSS 3:nth-child()セレクタ私はこれを見てやっとこれが鶏の肋骨だと思って、W 3 Sは人を殺します!!!
jsアルゴリズム面接問題
アルゴリズム学習7----1つの文字列の中で最初に1回しか現れない文字を見つける