0
点赞
收藏
分享

微信扫一扫

CSS选择器(二)复杂选择器

ZGtheGreat 2021-09-28 阅读 53

选择器的优先级

CSS标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级。

  • id选择器的数目记为a;
  • 伪类选择器和class选择器的数目记为b;
  • 伪元素选择器和标签选择器数目记为c;
  • “*” 不影响优先级。

specificity = base * base * a + base * b + c

base是一个“足够大”的正整数

!import:相当于一个新的优先级,而且此优先级会高于行内属性

样式出现先后顺序:

示例:

<div id="my" class="x y">text<div>
<style>
.x {
    background-color:red;
}
.z{
    background-color:yellow;
}
.y {
    background-color:green;
}
</style>

div为green

建议

  • 根据 id 选单个元素
  • class和class的组合选成组元素
  • tag选择器(标签选择器)确定页面风格

伪元素

  • ::first-line(排版后的第一行)
    • CSS标准规定了first-line必须出现在最内层的块级元素之内
  • ::first-letter(第一个字母)
    • 它的位置在所有标签之内
  • ::before
    - 在元素内容之前插入一个虚拟的元素
  • ::after
    • 在元素内容之后插入

::before 和 ::after 还支持content为counter

<p class="special">I'm real element</p>
<style>
  p.special::before {
    display: block;
    content: counter(chapno, upper-roman) ". ";
}
</style>

  • CSS标准只要求 ::first-line 和 ::first-letter 实现有限的几个CSS属性,都是文本相关,这些属性是下面这些。


举报

相关推荐

0 条评论