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中的内容