CSS3 选择器 派生选择器 伪类选择器 伪元素选择器（五）

CSS3 选择器 派生选择器 伪类选择器 伪元素选择器（五）

标签（空格分隔）： 前端学习

---

参考内容：MDN
选择器
选择器属性继承问题：
在一些老的浏览器中不支持继承，但是这些浏览器可以理解组选择器，例如

body  {
		font-family: Verdana,      sans-serif;
      }
p, td, ul, ol, li, dl, dt, dd  {
		font-family: Verdana, sans-serif;
     }

派生选择器
通过依据元素在其位置的上下关系来定义样式，可以使标记更加简洁
例如：

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }
<p>这段话中的一个词是<strong>红色</strong>.</p>
<h2>这段话是红色</h2>
<h2>这段话中的一个词是<strong>蓝色</strong>.</h2>

伪类选择器
伪类是选择器，用于选择处于特定状态的元素，例如它们是其类型的第一个元素，或者它们被鼠标指针悬停。伪类是以冒号开头的关键字：:pseudo-class-name
伪类的目标是处于某种状态的文档例如：

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}
<article>
    <p>要放大加粗的段落</p>
    <p>普通段落</p>
</article>

上述代码即可实现将article文档中首段的字体放大加粗，当在当前段首之前添加一个段落，添加的段落的字体就会被放大加粗

用户操作伪类
仅在用户以某种方式与文档交互时适用。

• :hover - 仅当用户将指针移动到元素（通常是链接）上时，此方法才适用
• :focus - 仅当用户使用键盘控件聚焦元素时适用

伪元素
类似创造了一个全新的HTML元素，例如：::pseudo-element-name
要注意的是，在早期的一些伪元素会使用单冒号语法

例子：

article p::first-line {
    font-size: 120%;
    font-weight: bold;
}
<article>
    <p>第一段</p>
    <p>第二段</p>
</article>

上述代码中::first-line只会对第一行作用，当第一行字数发生变化时也只会对第一行发生作用

结合伪类和伪元素
例如要将第一段第一行设置为粗体可以使用:first-child和::first-line选择器链接在一起。

article p:first-child::first-line {
    font-size: 120%;
    font-weight: bold;
    }

使用::before和::after生成内容
使用上述两个伪元素选择器配合content属性可以使用CSS将内容插入到文档中，例如：

.box::before {
    content: "This should
    show before the other
    content."
}`
<p class="box">Content in the box in my HTML page.</p>

最后显示的内容是：This should show before the other content.Content in the box in my HTML page.即将CSS中的内容插入到已有内容之前，如果使用::after就是在已有内容之后插入CSS中的内容