选择器

选择器：帮助你精准的选中想要的元素

简单选择器

1. ID选择器
2. 元素选择器
3. 类选择器
4. 通配符选择器

*，选中所有元素

/* id选择器 */
#name{}
/* 元素选择器 */
div{}
/* 类选择器 */
.name{}
/* 通配符选择器 */
*{}

5. 属性选择器

根据属性名和属性值选中元素

/* 选中所有具有href属性的元素 */
[href]{
    color:red;
}

[href="https://www.sina.com"]{
    color:red;
}
/* 选中href属性以baidu.com结尾的元素 */
a[href$="baidu.com"]{
    color:#008c8c;
}
/* 选中class属性中包含b的元素 */
[class*="b"]{
    color:green;
}

6. 伪类选择器

选中某些元素的某种状态

1）link: 超链接未访问时的状态

2）visited: 超链接访问过后的状态

3）hover: 鼠标悬停状态

4）active：激活状态，鼠标按下状态

爱恨法则：love hate

7. 伪元素选择器

before

after

span::before {
    content: "《";
    color: red;
}

span::after {
    content: "》";
    color: red;
}

选择器的组合

1. 并且
2. 后代元素 —— 空格
3. 子元素 —— >
4. 相邻兄弟元素 —— +
5. 后面出现的所有兄弟元素 —— ~

/* 匹配class="red"的p元素 */
p.red{}

/* 匹配class="red"的p元素的所有后代元素 */
.name p{}

/* 匹配class="red"的p元素的所有子元素 */
.name > p{}

/* 匹配class="red"的p元素的相邻兄弟元素 */
.name + p{}

/* 匹配class="red"的p元素的后面出现的所有兄弟元素 */
.name ~ p{}

选择器的并列

多个选择器, 用逗号分隔

语法糖

/* 同时选中class="name"和class="name1"的元素 */
.name,.name1{}