css—5 only-child or nth-of-type -云博客

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

# 前端 2024-05-05 05:32 0 31 来源：云博客

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