前端CSS基础3（CSS伪类选择器，选择器的优先级，CSS三大特性）

CSS伪类选择器

CSS 伪类选择器用于选取 DOM 元素在其生命周期中的某个特定状态。以下是一些常用的 CSS 伪类选择器及其用法：

1. :link - 对于链接元素 <a>，当链接未被访问时，应用样式。
   • 用法示例：a:link { color: black; }
2. :visited - 对于链接元素 <a>，当链接已被访问时，应用样式。
   • 用法示例：a:visited { color: purple; }
3. :hover - 当鼠标指针悬停在元素上时，应用样式。
   • 用法示例：a:hover { color: red; }
4. :active - 当元素被用户激活（如点击一个链接）时，应用样式。
   • 用法示例：button:active { background-color: green; }
5. :focus - 当元素获得焦点（如输入框被点击）时，表单类元素才能使用，应用样式。什么是获取焦点，也就是点击元素，触摸元素，或者通过键盘的tab键等方式，选择元素时就是获取焦点，
   • 用法示例：input:focus { border-color: blue; }
     这些伪类选择器可以单独使用，也可以与其他选择器组合使用，以实现更复杂的样式规则。

结构伪类

结构伪类是CSS中用于根据元素在文档树中的位置选取元素的选择器。以下是一些常用的结构伪类的用法：

1. :first-child - 选取父元素的第一个子元素。

   ul li:first-child {
     color: red;
   }
   /* div p选中的是div的后代p元素，
   但是 div p:first-child选中的是是div的后代p元素，
   且p的父亲是谁无所谓，但是p必须是其父亲的第一个儿子*/
   div p:first-child{
    color:red;
   }
    <div>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <marquee>
            <p>4</p>
            <p>5</p>
        </marquee>
        /*选中的是1，4 */
    </div>
   

2. :last-child - 选取父元素的最后一个子元素。

   ul li:last-child {
     color: blue;
   }
   

3. :nth-child(n) - 选取父元素的第n个子元素，其中n可以是具体的数字，也可以是公式或关键词。公式的话从n=0开始计算选取

   /*选取父元素ul的第n个子元素li*/
   ul li:nth-child(odd) {
     background-color: yellow;
   }
   

4. :nth-last-child(n) - 选取父元素的倒数第n个 child 的子元素。

   ul li:nth-last-child(2) {
     font-weight: bold;
   }
   

5. :first-of-type - 选取父元素的第一个指定类型的子元素，不必须是第一个子元素。

   ul li:first-of-type {
     text-decoration: underline;
   }
   

6. :last-of-type - 选取父元素的最后一个指定类型的子元素。

   ul li:last-of-type {
     text-decoration: line-through;
   }
   

7. :nth-of-type(n) - 选取父元素的第n个指定类型的子元素。

   ul li:nth-of-type(2) {
     color: green;
   }
   

8. :nth-last-of-type(n) - 选取父元素的倒数第n个指定类型的子元素。

   ul li:nth-last-of-type(2) {
     color: purple;
   }
   

9. :only-child - 选取父元素的唯一子元素。

   ul li:only-child {
     font-size: 20px;
   }
   

   only-child 是一个 CSS 伪类选择器，用于选择父元素中唯一的子元素。当一个元素是其父元素的唯一子元素时，该元素将被选中。

例如，以下代码将选择 <ul> 列表中唯一的 <li> 元素：

ul li:only-child {
  color: red;
}

在这个例子中，如果 <ul> 列表中只有一个 <li> 元素，那么这个元素的文字颜色将变为红色。如果有多个其他任何类型元素，则不会有任何效果。（不可以存在其他元素）

10. :only-of-type - 选取父元素的唯一指定类型的子元素。

    ul li:only-of-type {
      font-size: 20px;
    }
    

在这个例子中，如果

• 列表中只有一个
• 元素，但是可以存在其他元素，那么这个元素的文字颜色将变为红色。如果有多个
• 元素，则不会有任何效果。（可以存在其他元素）

11. :empty - 选取没有任何子元素的元素。

    div:empty {
      border: 1px solid black;
    }
    

    以上代码必须是div元素而且div标签内没有任何东西，没任何内容

12. :root - 选取文档的根元素。

    :root {
      font-size: 16px;
    }
    

    在 HTML 文档中，根元素始终是 元素。使用 :root 选择器可以定义一些全局的样式，这些样式会应用到整个文档。

13. :matches(selector) - 选取符合括号内条件的元素。

    ul li:matches(.special) {
      color: orange;
    }
    

总结：child的范围的所有兄弟，type的范围是指定类型

这些结构伪类可以帮助开发者实现更灵活的布局和样式效果，而不需要修改HTML结构或者添加额外的类和ID。

否定伪类

13. :not(selector) - 选取不符合括号内条件的元素。

    ul li:not(.special) {
      color: gray;
    }
    

在你给出的 CSS 规则中，ul li:not(.special) 这个选择器的目的是选择所有

• 标签下的
• 子元素，除了那些具有 special 类的
• 元素。对于被选择的
• 元素，这条规则会将其文字颜色设置为灰色。这是一种有效的方法来对除特定类之外的所有列表项应用样式。

例如，考虑以下 HTML 结构：

<ul>
  <li>Item 1</li>
  <li class="special">Item 2</li>
  <li>Item 3</li>
</ul>

根据上述 CSS 规则，Item 1 和 Item 3 的文本颜色将被设置为灰色，而 Item 2（带有 special 类）的颜色不会受到影响，保持默认颜色或其他指定样式。这样的选择器在处理具有例外项的样式时非常有用，允许你明确排除某些元素。

UI伪类

在CSS中，UI伪类是一组伪类选择器，专门用于根据用户界面的状态来选择元素。这些伪类主要关注元素的交互状态，如是否被选中、聚焦或处于活动状态等。它们对于增强表单控件和其他用户交互元素的可用性和视觉反馈非常有帮助。以下是一些常见的UI伪类及其用途：

:hover - 当用户将鼠标悬停在元素上时应用样式。这是最常用的UI伪类之一，通常用于增强按钮和链接的交互效果。

:active - 当元素被激活（例如，用户点击一个按钮并且鼠标仍然按下时）应用样式。这有助于给用户反馈，他们正在操作的元素。

:focus - 当元素获得键盘焦点时（如通过Tab键导航到输入框）应用样式。常用于提高表单可访问性，通过视觉反馈帮助用户识别当前焦点位置。

:checked - 用于单选按钮、复选框和选项按钮，当元素被选中时应用样式。这可以用来自定义表单控件的视觉表示。

:disabled - 当表单元素被禁用时应用样式。这有助于向用户显示哪些控件是不可交互的。

:enabled - 与 :disabled 相对，用于选择那些可用的表单元素。

:valid - 当表单元素的值通过验证时应用样式，如输入格式正确的电子邮件地址。

:invalid - 当表单元素的值未通过验证时应用样式，如格式错误的电子邮件地址。

:required - 用于有 required 属性的表单元素，通常用来突出必填字段。

:optional - 与 :required 相对，用于没有 required 属性的表单元素。

:in-range 和 :out-of-range - 当输入元素的值在定义的范围内（如通过 min 和 max 属性定义的范围）时，:in-range 会应用样式；相对地，:out-of-range 则用于值在范围外的情况。

这些UI伪类极大地扩展了CSS在响应用户交互方面的能力，允许开发者根据用户的交互状态来改变元素的样式，增强用户体验和界面的可用性。

目标伪类

：target 选中锚点指向的元素

div {
    font-size: 30;
    background-color: blueviolet;
    height: 200px;
}
/* 点看的第几个，第几个的背景变成白色 */
div:target{
    background-color:aliceblue;
}

    <a href="#1">去看第1个</a>
    <a href="#2">去看第2个</a>
    <a href="#3">去看第3个</a>
    <a href="#4">去看第4个</a>
    <div id="1">第1个</div>
    <div id="2">第2个</div>
    <div id="3">第3个</div>
    <div id="4">第4个</div>

语言伪类

语言伪类（Language pseudo-class）是 CSS 中的一种选择器，用于根据元素的语言属性来选择元素。

语言伪类的语法为 :lang(language)，其中 language 是一个表示语言的字符串。例如，:lang(en) 将选择所有英语元素，:lang(zh) 将选择所有中文元素。

语言伪类可以与其它选择器组合使用，以实现更复杂的选择逻辑。例如，以下代码将选择所有英语且具有 .highlight 类的 <p> 元素：

p:lang(en).highlight {
  color: blue;
}

在这个例子中，只有同时满足两个条件的 <p> 元素才会被选中，即它是英语元素且具有 .highlight 类。

语言伪类可以帮助开发者根据不同的语言设置不同的样式，从而实现更好的用户体验和可访问性。

伪元素选择器

伪元素选择器是CSS中用于对元素的特定部分应用样式的一种工具，它们通常不对应于文档树中的任何实际元素。以下是一些常用的伪元素选择器及其用途：

1. ::first-line：这个伪元素用于选择元素的第一行文本，并对其应用样式。例如，可以改变首行的字体颜色或字体样式。需要注意的是，：:first-line 只能应用于块级元素。
2. ::first-letter：此伪元素用于选择元素的首个字母，并可以为其设置不同的样式，如字体变大、颜色改变等，常用于实现首字下沉效果。

div::first-letter{
    color: red;
    font-size: 40px;
}
<div>i love you</div>
<!--选中div元素的首字母-->

3. ::before 和 ::after：这两个伪元素用于在元素的内容前后插入内容，这些内容可以是文本也可以是其他元素。这通常用于添加装饰性图标、编号或创建自定义的标记。必须配合content使用

/*选中的是p元素最开始的位置，随后创建一个子元素*/
P::before{
content:"￥"
}
/*选中的是p元素最后的位置，随后创建一个子元素*/
P::after{
content:".00"
}

4. ::selection：此伪元素用于改变用户选择文本时的高亮颜色，允许开发者自定义选中文字的背景色和前景色。
5. ::placeholder：此伪元素用于改变输入字段中占位符文本的样式，例如，可以改变输入框中提示文字的颜色或字体样式。

input::placeholder{
color：skyblue;
}
/*选中的是input元素中的提示文字*/

6. ::marker：此伪元素用于改变列表项前的标记样式，如项目符号或数字编号。
7. ::slotted：此伪元素用于选择被放入 HTML 插槽（slot）内的子节点。
8. ::backdrop：此伪元素用于在一个弹出层后面创建一个背景，可以用于模糊或改变背后内容的外观。

在 CSS3 中，双冒号(::)取代了伪元素的单冒号表示法(😃，这是 W3C 为了区分伪类和伪元素所做的尝试。为了向后兼容，CSS2 和 CSS1 中的伪元素也可以接受单冒号语法。一般正常情况下我们用双冒号语法。

综上所述，伪元素选择器是 CSS 中非常强大的工具，它们允许开发者对页面上的特定部分进行精确的样式控制，从而创造出更丰富和更具吸引力的用户界面。

选择器的优先级

总的来说，了解CSS选择器的优先级对于进行有效的样式管理至关重要。开发者应当通过合理设计选择器和利用上述规则来确保样式表易于维护且具有良好的可读性。
在CSS中，选择器的优先级（或称为权重）是一个重要的概念，它决定了当多个样式规则应用于同一元素时哪些规则将优先生效。CSS选择器的优先级基于以下几个因素：

1. 内联样式
内联样式直接在HTML元素的style属性中定义，它拥有最高的优先级。

2. ID选择器
ID选择器（如#header）的优先级仅次于内联样式。

3. 类选择器、伪类选择器和属性选择器
这一组选择器的优先级相同，高于元素选择器和伪元素选择器。例如，类选择器（如.menu），属性选择器（如[type=“text”]），和伪类选择器（如:hover）。

4. 元素选择器和伪元素选择器
元素选择器（如div，p）和伪元素选择器（如::after，::before）的优先级最低。

特异性：选择器的特异性指的是选择器对目标元素的精确程度。特异性由高到低大致排列为：ID选择器（#）、类选择器（.）、属性选择器（[ ]）、伪类选择器（：）、标签选择器（元素名）和通配符选择器（*）。

权重优先级计算规则（Specificity）
CSS选择器的优先级可以通过一个三位数的“特异性”值（a, b, c,）（百，十，个位）来计算：

a：此位置表示ID选择器的数量。
b：此位置表示类选择器、伪类选择器和属性选择器的数量。
c：此位置表示元素选择器和伪元素选择器的数量。
举个例子，考虑以下CSS规则：

#nav .item:hover > a { color: blue; }  /* a=1, b=2, c=1 */
body #content .data p { color: red; } /* a=1, b=1, c=3 */
<p style="color: aliceblue;">白色</p> 
/* a=0, b=0, d=0 但是是内联样式优先级最高*/

第一条规则的特异性是 ( 1, 2, 1)，第二条规则的特异性是 (1, 1, 3)。比较特异性时，从左到右比较每一位，较大的值具有较高的优先级。在这个例子中，第一条规则的优先级更高。
顺序：当两个选择器具有相同的权重时，后出现的选择器将覆盖先出现的选择器。这称为“后来者居上”原则。
重要性（!important）
!important 规则可以覆盖其他所有普通规则的优先级，但如果有多个规则都标记为 !important，则再次根据上述特异性规则进行比较。

CSS三大特性

CSS（层叠样式表）的三大特性包括：

层叠性（Cascading）：这是CSS中最核心的特性之一。它允许多个样式表的规则应用到同一个HTML元素上，并根据规则的特定顺序决定哪些规则最终会被实施。这个顺序通常由源代码的顺序、选择器的特异性以及重要性（如使用 !important 声明）来决定。

继承性（Inheritance）：某些CSS属性值是可以从父元素传递到子元素的，这意味着不必在每个元素上重复定义相同的样式。继承能够简化样式表的编写和维护，例如，如果你为一个父元素设置了字体样式，它的子元素默认会继承这种字体设置，除非显式地为子元素指定了不同的样式。

特异性（Specificity）也就是优先级：当多条规则应用于同一个元素时，浏览器使用特异性原则来决定哪条规则最优先应用于该元素。特异性是根据选择器的类型计算得出的，其中，！important>行内（内联）样式>ID选择器>类选择器和属性选择器>元素和伪元素选择器>*>继承的样式。