还有很多很多选择器，这里仅列出常用的


目录

  • 1. 标签选择器
  • 2. 类选择器
  • 3. id选择器
  • 4. 通配符选择器
  • 5. 后代选择器
  • 6. 子代选择器
  • 7. 并集选择器
  • 8. 兄弟选择器
  • 9. focus伪类选择器
  • 10. 链接伪类选择器
  • 11. 属性选择器
  • 12. 结构伪类选择器
  • (1) child选择器
  • (2) type选择器
  • 13. 伪元素选择器


1. 标签选择器

  • 直接根据标签名选择即可
div {
	这里书写属性
}

2. 类选择器

  • 被选择标签需要有class属性
.xx {
	使用'.属性名'来选择标签
}

3. id选择器

  • 被选择标签需要有id属性
#xx {
	使用'#属性名'来选择标签
}

4. 通配符选择器

  • 选择全部标签，一般用来初始化页面元素
* {
    margin: 0;
    padding: 0;
}

5. 后代选择器

div a span {
  选择div下面的a下面的span
}

6. 子代选择器

div > a {
  选择div下一级的a元素，仅针对'下一级'
}

7. 并集选择器

div a,
span a {

}

8. 兄弟选择器

  • 操作对象是与该元素相同父亲，且相邻的元素
  • 选中该元素的兄弟元素
a + span {
  选择a元素的兄弟元素span
}

9. focus伪类选择器

a:focus {
  选择已经获取焦点的标签
}

input:focus {

}

10. 链接伪类选择器

  • 如果混合使用，需要按照 " link、visited、hover、active " 的顺序书写，否则浏览器可能无法正常显示这4种样式
a:link {
  选择鼠标未点击的
}

a:visited {
  选择鼠标已经点击过的
}

a:hover {
  选择鼠标经过
  
  -- 该伪类可以定义任何一个元素在鼠标经过时的样式
}

a:active {
  选择鼠标点击未弹开
}

11. 属性选择器

E[YY] {
    选择有YY属性的元素
}

E[YY = "ZZ"] {
    选择有YY属性，且属性值等于ZZ的元素
}

E[YY ^= icon] {
    选择有YY属性，且属性值是以icon开头的元素
}

E[YY $= icon] {
    选择有YY属性，且属性值是以icon结尾的元素
}

E[YY *= icon] {
    选择有YY属性，且属性值包含icon的元素
}

12. 结构伪类选择器

  • n的说明：本质上就是选中第几个子元素

当n等于什么时

n的意义

1 2 3 … n

选中第几个子元素

even(偶数)、odd(奇数)

选中全部的奇数或偶数

公式

2n(0 2 4 6 … )、5-n(5 4 3 2 1 0) 、、、、、、

n=0或n>max

忽略不计

(1) child选择器

  • 功能：选择有父级元素的第 n 个 XX元素，先关注是第几个孩子，再判断类型是否符合
  • 先找到有父级元素的第 n 个 XX元素，之后判断是不是指定元素
  • 是，选择这个元素
  • 不是，不选择这个元素
li:first-child {
    找到同一级中的第 1 个子元素
    判断是不是 li
}

li:last-child {
    找到同一级中的 最后1个 子元素
    判断是不是 li
}

li:nth-child(n) {
    找到同一级中的第 n 个子元素
    判断是不是 li
}

(2) type选择器

  • 与child选择器功能一样，只不过type是先找出所有符号类型要求的元素，再关注第几个
li:first-of-type {

}

li:last-of-type {

}

li:nth-of-type(n) {

}

13. 伪元素选择器

  • 必须要有 content 属性，否则不起效果
  • before 在内容前面，after 在内容后面
  • before 和 after 创建的是一个元素，但是属于行内元素
  • 伪元素和标签选择器一样，权重为 1
  • 创建出来的元素在 Dom 中查找不到，所以称为伪元素
p:before {
	content: '前面前面';
    color: red;
}

p:after {
	content: '后面后面';
    color: yellow;
}