Css选择器如何精准定位Dom元素

css选择器精准定位Dom元素(部分)

1.A——类型选择器

根据元素的类型进行选择<div>,<ul>,<p>....都是不同的元素类型

2.#id——id选择器

<div class="id"></div>这个时候就可以用id选择器了

3.A B——后代选择器

选择A内部的所有元素B

4.#id A——后代选择器与id选择器结合使用

<style> 
/* 匹配id为box的元素下，所有p标签（所有层级），变红 */
    #box p { color: red; } 
</style>
<!-- 唯一父容器：id="box" --> 
<div id="box"> 
    <p>直接子元素p（变红）</p>
    <div>
        <p>孙子层级p（也变红，后代都匹配）</p>
    </div>
</div> 
<!-- 外部p标签：不匹配，不变红 -->
<p>id=box外的p（无样式）</p>

5..classname——class选择器

<div class="table"></div> .table

6.A.className——组合类选择器

<div>
    <span class="small" />
</div>

7.A,B——逗号组合器

<span>
    <p />
</span>
<div>
    <p />
</div>

8. *——全局/通用选择器

9. A *——组合通用选择器

10. A + B——相邻兄弟选择器

这会选中所有紧接在其后B元素

11. A ~ B——通用兄弟姐妹选择器

选择位于另一个元素之后的元素

12. A > B——子选择器

<div>
    <p></p>
</div>
//div > p

13. :first-child——首个子元素伪选择器

<ul>
    <li />
    <li />
    <li />
    <li />
    <li />
</ui>
//li:first-child

14. :only-child——唯一子元素伪选择器

<style> 
/* 唯一子元素变红色 */
:only-child { color: red; } 
</style>
<div>
    <p>我是唯一子元素</p>
</div> 
<!-- 匹配失败：div下有p+span两个子元素 → 不红 --> 
<div>
    <p>我有兄弟</p>
    <span>兄弟在这</span>
</div>

15. :last-child——最后一个子元素伪选择器

<style>
/* 最后一个子元素变红、加粗 */ 
    *:last-child { color: red; font-weight: bold; } 
</style> 
<!-- 匹配成功：第三个li是ul最后1个直接子元素 → 红粗 --> 
<ul> 
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3（最后1个，生效）</li> </ul> 
    <!-- 匹配成功：span是div最后1个直接子元素 → 红粗 --> 
<div>
    <p>段落</p> 
    <span>我是最后1个子元素（生效）</span>
</div>

16. :nth-child(A)——第M个子元素伪选择器

<style> 
/* 第2个直接子元素变红、加粗 */
    *:nth-child(2) { color: red; 
font-weight: bold; } 
</style> 
<!-- 匹配成功：第二个li是ul第2个直接子元素 → 红粗 -->
<ul>
    <li>列表1</li> 
    <li>列表2（第2个，生效）</li>
    <li>列表3</li>
</ul> 
<!-- 匹配成功：span是div第2个直接子元素 → 红粗 -->
<div> 
    <p>段落1</p> 
    <span>第2个子元素（生效）</span> 
    <p>段落2</p> 
</div>

17. :nth-last-child(A)———第N个倒数后一位子元素选择器

<style>
/* 倒数第2个直接子元素变红、加粗 */ 
    *:nth-last-child(2) { color: red; font-weight: bold; }
</style>
<!-- 匹配成功：第二个li是ul倒数第2个直接子元素 → 红粗 -->
<ul> 
    <li>列表1</li>
    <li>列表2（倒数第2，生效）</li>
    <li>列表3</li>
</ul> 
<!-- 匹配成功：span是div倒数第2个直接子元素 → 红粗 -->
<div> 
    <p>段落1</p> 
    <span>倒数第2个子元素（生效）</span> 
    <p>段落2</p>
</div>

18. :first-of-type——第一个类选择器

<style>
/* p标签的第一个同类型子元素变红 | span标签的第一个同类型子元素变蓝 */
    p:first-of-type { color: red; } 
    span:first-of-type { color: blue; } 
</style>
<!-- 父div下有p、span、p，按类型筛选 -->
<div>
    <p>我是父元素下第一个p类型（变红）</p> 
    <span>我是父元素下第一个span类型（变蓝）</span> 
    <p>我是第二个p类型（不红）</p>
</div>

19. :nth-of-type(A)——匹配父元素下，某类 HTML 标签的第 A 个直接子元素

<style>
/* 父元素下第2个p标签变红 | 第2个span标签变蓝 */
    p:nth-of-type(2) { color: red; }
    span:nth-of-type(2) { color: blue; } 
</style> 
<div>
    <p>第1个p（不红）</p> 
    <span>第1个span（不蓝）</span>
    <p>第2个p（变红，生效）</p>
    <div>无关标签</div>
    <span>第2个span（变蓝，生效）</span>
</div>

20.:nth-of-type(An+B)——父元素下某类标签的「规律型同类型子元素」

高频实用公式

公式	作用	适用场景
2n+1/odd	选中同类型奇数位元素	奇数行变色
2n/even	选中同类型偶数位元素	偶数行变色
3n+1	选中同类型 1、4、7、10...	每 3 个选 1 个
n+3	选中同类型 3、4、5、6...	从第 3 个开始全选

总结

1. • A
2. • #id
3. • A B
4. • #id A
5. • .classname
6. • A.className
7. • A,B
9. • A *
10. • A + B
11. • A ~ B
12. • A > B
13. • :first-child
14. • :only-child
15. • :last-child
16. • :nth-child(A)
17. • :nth-last-child(A)
18. • :first-of-type
19. • :nth-of-type(A)
20. • :nth-of-type(An+B)