1. 技术文章
  2. css---5 only-child or nth-of-type

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

由 感情迁移 提交于 2019-12-02 22:06:03

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;
    width: 100px;
    height: 30px;
}
div {
    width: 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

 

标签
meta
background
charset
last
nth-child
css
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!