【前端知识之CSS】CSS选择器

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍CSS选择器相关知识。

---

一、CSS选择器有哪些

CSS选择器用来告诉浏览器应该选中哪个HTML元素。

<div id="box">
    <div class="one">
        <p class="one_1">
        p >
        <p class="one_1">
        p >
    div>
    <div class="two">div>
    <div class="two">div>
    <div class="two">div>
div>

常用的属性选择器有：

1. id选择器（#box）：选择id为box的元素。
2. 类选择器（.one）：选择class为one的元素。
3. 标签选择器（div）：选择标签为div的所有元素。
4. 后代选择器（#box div）：选择id为box的内部所有的div元素。
5. 子选择器（.one>one_1）：选择父元素为.one的所有.one_1的元素。
6. 相邻兄弟选择器（.one+.two）：选择紧接在.one之后的所有.two元素。
7. 伪类选择器：
   （1）:first-child：父元素的首个子元素；
   （2）:nth-child(n)：根据元素在一组同级中的位置匹配元素；
   （3）:last-child：父元素的最后一个子元素。

二、CSS选择器的优先级

选择器	格式	优先级权重
内联样式	通过style属性来设置	1000
id选择器	#id	100
类选择器	.classname	10
属性选择器	a[ref=“eee”]	10
标签选择器	div	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

补充：
内联样式：又称行内样式，在标签内部通过style属性设置元素的样式。
内部样式：写到html文件中的