zoukankan      html  css  js  c++  java

  • css---5 only-child or nth-of-type

    1  _nth-child系列

         :nth-child（index）

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-child(3) {
    background: #f00;
}
/*
ul > li:nth-child(2n) {
    background: #ff0;
}
ul > li:nth-child(2n+1) {
    background: #0f0;
}
ul > li:nth-child(n+4) {
    background: #abcdef;
}
ul > li:nth-child(odd) {
    background: red;
}
ul > li:nth-child(even) {
    background: blue;
}
*/
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>
    View Code

    2 :first-child   第一个孩子

    :first-child {
    border: 1px solid;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Child</title>
<style type="text/css">
:first-child {
    border: 1px solid;
}
</style>
</head>
<body>
    <div id="wrap">
        <div>0-1</div>
        <div>0-2</div>
        <div>0-3</div>
    </div>
    <div>1-1</div>
</body>
</html>
    :first-child

    3 #wrap > div:first-child 

    #wrap > div:first-child {
    color: deeppink;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-Child</title>
<style type="text/css">
#wrap > div:first-child {
    color: deeppink;
}
</style>
</head>
<body>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<div id="wrap">
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</div>
<div>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</div>
</body>
</html>
    View Code

    4  :last-child               最后一个孩子

    :last-child {
    border: 1px solid;
    
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-Child</title>
<style type="text/css">
:last-child {
    border: 1px solid;
    
}
</style>
</head>
<body>
<div id="wrap">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
</body>
</html>
    View Code

    5  #wrap > div:last-child

    #wrap > div:last-child {
    border: 1px solid;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-Child</title>
<style type="text/css">
#wrap > div:last-child {
    border: 1px solid;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
<div>wrap同级</div>
</body>
</html>
    last-child

    6  nth-last-child(3)                   元素倒数坐标

    ul > li:nth-last-child(3) {
    background: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Child</title>
<style type="text/css">
ul > li:nth-last-child(3) {
    background: #f00;
}
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
<hr>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<div>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</div>
<div>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</div>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</body>
</html>
    View Code

    7  article:only-child                只有一个孩子

    article:only-child {
    background: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-child</title>
<style type="text/css">
article:only-child {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>
    only child

    nth-of-type

    div:nth-of-type(index)

    div:nth-of-type(2) {
    color: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-of-type</title>
<style type="text/css">
/*div:nth-child(2) {
    color: #f00;
}*/
div:nth-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>
    View Code

    first-of-type      一个孩子或者第一个孩子

    div:first-of-type {
    color: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First-of-type</title>
<style type="text/css">
div:first-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>
    View Code

    Last-of-type               最后一个孩子

    div:last-of-type {
    color: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Last-of-type</title>
<style type="text/css">
div:last-of-type {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>
    View Code

    nth-last-of-type         中间孩子或第一个孩子

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-Last-of-type</title>
<style type="text/css">
/*div:nth-last-child(2) {
    color: #f00;
}*/
div:nth-last-of-type(2) {
    color: #f00;
}
</style>
</head>
<body>
<div>0-1</div>
<section>
    <div>1-1</div>
    <div>1-2</div>
    <div>1-3</div>
</section>
<div>0-2</div>
<div>0-3</div>
<section>
    <div>2-1</div>
    <div>2-2</div>
    <div>2-3</div>
</section>
</body>
</html>
    View Code

    only-of-type                 唯一的一个标签元素

    article:only-of-type {
    background: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>only-of-type</title>
<style type="text/css">
article:only-of-type {
    background: #f00;
}
</style>
</head>
<body>
<section>
    <article>1</article>
    <article>2</article>
</section>
<section>
    <article>3</article>
</section>
<section>
    <div>4</div>
    <article>5</article>
    <div>6</div>
</section>
<section>
    <div>7</div>
    <article>8</article>
    <article>9</article>
    <div>10</div>
</section>
</body>
</html>
    View Code

    not（元素节点）

    div > a:not(:last-of-type) {
    border-right: 1px solid red;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>not</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: none;
}
a {
    text-decoration: none;
    color: #333;
    font-size: 14px;
    display: block;
    float: left;
     100px;
    height: 30px;
}
div {
     800px;
    margin: 0 auto;
}
div > a:not(:last-of-type) {
    border-right: 1px solid red;
}
</style>
</head>
<body>
<div>
    <a href="#">first</a>
    <a href="#">second</a>
    <a href="#">third</a>
    <a href="#">fourth</a>
    <a href="#">fifth</a>
</div>
</body>
</html>
    not

    empty

    div:empty {
    background: #f00;
}
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty</title>
<style type="text/css">
div {
    height: 200px;
    background: #abcdef;
}
div:empty {
    background: #f00;
}
</style>
</head>
<body>
<div></div>
<div>Second</div>
<div></div>
<div>Third</div>
</body>
</html>
    empty
  • 相关阅读:
    分布式版本控制系统Git-----5.Git 的push命令总结
    分布式版本控制系统Git-----4.Git 常用命令整理
    分布式版本控制系统Git-----3.图形化Tortoisegit创建本地库并且提交到远程服务器上
    分布式版本控制系统Git-----2.上传至远程仓库之基础版
    分布式版本控制系统Git-----1.Git 初识
    JavaWeb笔记03-Servlet
    JavaWeb笔记01-XML
    Emmet的html语法
    npm常用命令
    Node.js中事件的循环
  • 原文地址：https://www.cnblogs.com/hack-ing/p/11764204.html
Copyright © 2011-2022 走看看