跳转至

选择器

标签选择器

选择所有div标签： 

1
2
3
4
5
div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

ID选择器

选择ID为rect-1的标签： 

1
2
3
4
5
#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

类选择器

选择所有rectangle类的标签： 

1
2
3
4
5
.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

伪类选择器

伪类用于定义元素的特殊状态。

链接伪类选择器：

  • :link：链接访问前的样式
  • :visited：链接访问后的样式
  • :hover：鼠标悬停时的样式
  • :active：鼠标点击后长按时的样式
  • :focus：聚焦后的样式

位置伪类选择器：

  • :nth-child(n)：选择是其父标签第n个子元素的所有元素。

目标伪类选择器：

  • :target：当url指向该元素时生效。

复合选择器

由两个及以上基础选择器组合而成的选择器。

  • element1, element2：同时选择元素element1和元素element2。
  • element.class：选则包含某类的element元素。
  • element1 + element2：选择紧跟element1的element2元素。
  • element1 element2：选择element1内的所有element2元素。
  • element1 > element2：选择父标签是element1的所有element2元素。

通配符选择器

  • *：选择所有标签
  • [attribute]：选择具有某个属性的所有标签
  • [attribute=value]：选择attribute值为value的所有标签

伪元素选择器

将特定内容当做一个元素，选择这些元素的选择器被称为伪元素选择器。

  • ::first-letter：选择第一个字母
  • ::first-line：选择第一行
  • ::selection：选择已被选中的内容
  • ::after：可以在元素后插入内容
  • ::before：可以在元素前插入内容

样式渲染优先级

  • 权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器
  • 权重相同时，后面的样式会覆盖前面的样式
  • 继承自父元素的权重最低
回到页面顶部