《CSS权威指南》--读书笔记（二）_支持这种行为的用户代理在锚处于悬停状态时必须重绘文档-CSDN博客

本文链接：https://blog.csdn.net/u010313768/article/details/37833641

第二章

1.多类选择器

<p class="urgent warning">skhdksh</p>

<p class="warning">sdkjskd</p>

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素

.warning{font-weight:bold}

.warning.urgent{background:silver}

.warning,help{background:red}

第一个CSS规则两个都应用，而第二个规则只有第二个<p>元素应用,但用法可以是：.urgent.warning，不分顺序，和下面的多类属性选择器不一样

而第三个规则两个p元素都不应用

2.属性选择器

用法:

h1[class]{color:silver;}

h1[class="red"]{color:red;}

多类属性选择器

下面的CSS规则只有同时有href和title属性的html超链接的文本才应用

a[href][title]{font-weight:bold;}

下面的和上面1,多类选择器不一样，是要分顺序，中间还必须有空格

p[class="urgent warning"]{font-weight:bold;}

根据部分属性值选择:为什么要用呢？因为它能用于任何属性，而不只是class

波浪号~：和p.waring是一样，即根据属性值中出现的一个空格分隔的词来完成选择

^：选择以waring开头的所有元素

$：选择以.warning结尾的所有元素

*：选择属性中包含子串"warning"的所有元素

|:选择属性中以warning开头或者等于warning的所有元素，和*不一样

p[class~="warning"]

p[class^="warning"]

p[class$="warning"]

p[class*="warning"]

还有一个特定属性选择类型

下面的规则会选择lang属性等于en或者en-开头的所有原色

*[lang|="en"]

<h1 lang="en">sds</h1>
<p lang="en-us">slkjsdl</p>

3.理解html文档结构

选择子元素,

和后代选择器 h1 strong不一样，子选择器限制为只匹配树中直接相连的元素

h1>strong{color:red}

选择相邻兄弟元素

但这个语法无法选择第一个元素，也就是h1,

h1+p{color:red}

这个例子多了一行文本，不过还是可用上面的规则，因为中间的文本并不包含在兄弟元素中

<h1>sdlhsdh</h1>
sddsds
<p>skjdnks</h1>

4.伪类

所有伪元素都必须放在该伪元素的选择器的最后面

前面2个的是静态伪类，其他三个是动态伪类，一般用法也就是lvfha，在下面的将特殊性的时候会说到，为什么要这样做

:link :visited :focus :hover :active

分别是未访问、访问过、指示当前拥有输入焦点的元素（在form表单中很有用）、悬浮在元素时、被激活的元素（也就悬浮在元素时双击的元素）

动态伪类可以应用到任何元素，这点对于非链接的元素应用动态样式时很有用

链接伪类

超链接一般是指有href属性的所有a元素，但在xml语言中，超链接可以使任何元素，这里不讨论。

一种特殊用法，使得所有未访问页面的锚都是紫色，访问过得都是银色

<body link="purple" vlink="silver">

下面的规则和上面的效果是一样的

a:link{color:purple;}
a:visited{color:red;}

动态样式的实际问题

例如使用动态伪类来改变格局

下面的规则在支持这种行为的用户代理在锚处于悬停状态时必须重绘文档，这就要求重新显示该链接之后的所有内容，强烈建议要避免这种行为的设计

h1:hover{font-size:200%;}

<p>ksdhsk</p>
<h1>sdlkhsd</h1>
<p>dsdk</p>

选择第一个子元素

记住，看下面的规则，并不是选择p元素的第一个子元素，而是第一个p元素，别混淆了

<span style="color:#ff0000;">p:first-child{color:red;}
p:last-child{color:purple;}</span>

上面所用到的伪类，它所表示的实质是，它把某种幻想类关联到与伪类相关联的元素，例如第一个子元素等于

p:first-child{color:red;}

<p class="first-child">sdjsh</p>

根据语言选择

:lang()伪类就相当于|=属性选择器，但伪类比属性选择器健壮一些，建议使用

*:lang(fr){font-style:italic;}

结合伪类

用哪种顺序不重要，但不要把互斥的伪类结合在一起使用

a:link:hover{color:red;}//顺序不重要，也可以是 a:hover:link
a:link:visited{color:red;}//这规则是错的，互斥的伪类

伪元素选择器

<h2 :first-letter>元素并不会出现在文档源代码中。相反，它是由用户代理动态构造的，用于相相应文本块应用:first-letter样式

下面的规则能应用于标记或段落之类的块级元素，而first-letter能应用到所有元素

h2:first-letter{color:red;}

h2:first-line{color:red;}

设置之前和之后的样式,插入生成的内容，有关内容的12章更全面地介绍

h2:before{content:"sb,你好";color:red;}
h2:after{content:"sb,再见";color:red;};