[读书笔记]CSS权威指南1:选择器-大炮～

来源：动视网责编：小采时间：2020-11-27 16:43:48

[读书笔记]CSS权威指南1:选择器-大炮～

[读书笔记]CSS权威指南1:选择器-大炮～:通配选择器可以与任何元素匹配，就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器指示文档元素的选择器。 /*为body的字体设置为红色*/ body { color: red； } 分组选择器分组 h1, h2, h3 {

推荐度：

点击下载本文 文档为doc格式

导读[读书笔记]CSS权威指南1:选择器-大炮～:通配选择器可以与任何元素匹配，就像是一个通配符 /*每一个元素的字体都设置为红色*/ * { color: red; } 元素选择器指示文档元素的选择器。 /*为body的字体设置为红色*/ body { color: red； } 分组选择器分组 h1, h2, h3 {

因此，伪类比属性选择器稍微健壮一些。

结合伪类：

/*鼠标指针停留在未访问链接上时，可以让这些链接变成红色，而鼠标指针停留在已访问链接上时，链接变成紫红色。*/
a:link:hover {
 color: red;
}

a:visited:hover {
 color: maroon;
}

用哪种顺序指定并不重要，写成a:hover:link会得到与a:link:hover一样的效果。

伪元素选择器

就像伪类为锚指定幻象类一样，伪元素能够在文档中插入假想的元素，从而得到某种效果。CSS2.1中定义了4个伪元素：设置首字母样式、设置第一行样式、设置之前和之后的样式。

设置首字母样式

用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式。

/*让每个h2中第一个字母的大小是标题中其余字母大小的2倍*/
h2:first-letter {
 font-size: 200%;
}

这个规则会导致用户代理(浏览器)对一个假想的元素作出响应，这个假想元素包含每个h2中的第一个字母。可能如下所示：

This is an h2 element

:first-letter样式只应用到上例所示假想元素的内容。这个元素并不出现在文档源代码中。相反，它是由用户代理动态构造的，用于向相应文本块应用：first-letter样式。换句话说，是一个伪元素。

设置第一行样式

:first-line可以用来影响元素中第一个文本行。(第一行是指显示区域的第一行，所以浏览器窗口大小不同，第一行所代表的字符数量也是不同的。)

/*应用于每一段所显示的第一行文本。*/
p:first-line {
 color: red;
}

:first-letter, :first-line允许设置的CSS属性：

:first-letter	:first-line
所有的font属性	所有的font属性
color	color
所有background属性	所有background属性
所有margin属性
所有padding属性
所有border属性
text-decoration	text-decoration
vertical-align	vertical-align
text-transform	text-transform
line-height	line-height
float
letter-spacing	letter-spacing
word-spacing

设置之前和之后的样式

h2:before {
 content: "before";
 color: red;
}

h2:after {
 content: "after";
 color: red;
}

所有伪元素都必须放在出现该伪元素的选择器的最后面，如果写成p: first-line em就是不合法的，因为伪元素在选择器主体前面出现。

[读书笔记]CSS权威指南1:选择器-大炮～

推荐度：

点击下载本文 文档为doc格式

标签：笔记 css 选择器

热门焦点

[读书笔记]CSS权威指南1:选择器-大炮～

[读书笔记]CSS权威指南1:选择器-大炮～

This is an h2 element

[读书笔记]CSS权威指南1:选择器-大炮～

最新推荐

猜你喜欢

热门推荐