cover

选择器的类型

主要包含类选择器、类型选择器、ID 选择器，在此基础上可以增加标签属性选择器、伪类和伪元素

类型、类、ID 选择器

类型选择器作用于同类型的元素

span {
    background-color: yellow;
}

类选择器作用域指定了 class 的元素

.highlight {
    background-color: yellow;
}

<p class="highlight">

可以通过指定类型来指定特定元素的类

span.highlight {
    background-color: yellow;
}

也可以通过对一个元素应用多个类

.notebox {
  border: 4px solid #666;
  padding: .5em;
}

.notebox.warning {
  border-color: orange;
  font-weight: bold;
}

.notebox.danger {
  border-color: red;
  font-weight: bold;
}

<div class="notebox warning">
    This note shows a warning.
</div>

<div class="notebox danger">
    This note shows danger!
</div>

<div class="danger">
    This won't get styled — it also needs to have the notebox class
</div>

你也可以通过指定 ID 来选择元素, 同一个页面中 ID 不允许重复

#one {
    background-color: yellow;
}

h1#heading {
    color: rebeccapurple;
}

<h1 id="heading">ID selector</h1>

通常而言, ID 选择器只有在需要指定特定一个元素的时候使用, 其他时候更推荐使用其他方式;

类选择器更多用于全局样式的修改, 和类内元素的样式设置, 如果希望对一些基础样式作出修改, 那么请在 CSS 开头完成; 类内元素使用.class type{}来完成

类选择器是最为常用

关系选择器

# 后代选择器作用于所有的子代和子代的子代
p strong {
    color: red;
}

# 子代选择器只作用于一级子代
.one p{
    color: red;
}

并集选择器, 将属性作用于多个元素上

p, #one, .two {
    color: red;
    }

伪类和伪元素

常用的伪类:

链接 a

  1. :link  应用于未被访问过的链接。
  2. :hover  应用于有鼠标指针悬停于其上的元素。
  3. :active  应用于被激活的元素，如被点击的链接、被按下的按钮等。
  4. :visited  应用于已经被访问过的链接。

其他常用的伪类:

选择器 描述
:first-child 匹配兄弟元素中的第一个元素。
:hover 当用户悬浮到一个元素之上的时候匹配。

伪元素

其中first-letter和first-line较为常用, selection 可以用于定制选中文本时的效果

选择器 描述
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::selection 匹配文档中被选择的那部分。

CSS 层叠优先级

这里只做了一个简单的优先级考量, 更具体的请参考 MDN

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

  • ID：选择器中包含 ID 选择器则百位得一分。
  • 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
  • 元素：选择器中包含元素、伪元素选择器则个位得一分。

在真实比对优先级时, 从 ID 开始比较, 若到元素环节依然相同, 则后出现的生效
!important 优先级最高, 内联样式其次, 然后才到 ID/类/元素的考量, 下面是一个示例

/* 1. specificity: 1-0-1 */
#outer a {
    background-color: red;
}

/* 2. specificity: 2-0-1 , this one win!*/
#outer #inner a {
    background-color: blue;
}

/* 3. specificity: 1-0-4 */
#outer div ul li a {
    color: yellow;
}

/* 4. specificity: 1-1-3 this one win!*/
#outer div ul .nav a {
    color: white;
}

/* 5. specificity: 0-2-4 */
div div li:nth-child(2) a:hover {
    border: 10px solid black;
}

/* 6. specificity: 0-2-3 */
div li:nth-child(2) a:hover {
    border: 10px dashed black;
}

/* 7. specificity: 0-3-3  this one win!*/
div div .nav:nth-child(2) a:hover {
    border: 10px double black;
}

参考

盒模型 - 学习 Web 开发 | MDN (mozilla.org)

如果你有一些意见或建议, 欢迎评论! 你的意见对我很重要.
如果觉得有帮助的话, 麻烦点一点仓库的 star感激不尽