12.20 伪元素 兄弟元素选择器 否定伪类_样式的继承_权重_伪类顺序_文本标签

1 伪类和伪元素

有时候,你需要选择本身没有标签,但是 仍然易于识别的网页部位,比如段落首行 或鼠标滑过的连接。CSS为他们提供一些选 择器:伪类和伪元素。

2 给链接定义样式

有四个伪类可以让你根据访问者与该链接的交 互方式,将链接设置成4种不同的状态。
正常链接
a:link
访问过的链接
a:visited(只能定义字体颜色)
鼠标滑过的链接
a:hover
正在点击的链接
a:active

3其他

获取焦点
:focus
指定元素前
:before
指定元素后
:after
选中的元素
::selection

4 给段落定义样式

首字母
:first-letter
首行
:first-line

5 属性选择器

属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名=“属性值”]
[属性名~=“属性值”]
[属性名|=“属性值”]
[属性名^=“属性值”]
[属性名$=“属性值”]
[属性名*=“属性值”]

6 子元素选择器

子元素选择器可以给另一个元素的子元素 设置样式。
语法:
父元素 > 子元素{}
比如body > h1将选择body子标签中的所 有h1标签。
##7 其他子元素选择器
:first-child
选择第一个子标签
:last-child
选择最后一个子标签
:nth-child
选择指定位置的子元素
:first-of-type
:last-of-type
:nth-of-type
选择指定类型的子元素

8 兄弟选择器

除了根据祖先父子关系,还可以根据兄弟 关系查找元素。
语法:
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有的兄弟元素
兄弟元素 ~ 兄弟元素{}

9 否定伪类

否定伪类可以帮助我们选择不是其他东西 的某件东西。
语法:
:not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。

10 继承

就像父亲的财产会遗传给儿子一样,在CSS中祖先元素的样式 同样也会被子元素继承。
继承是指应用在一个标签上的那些CSS样式会同时被应用到其 内嵌标签上。
比如为父元素设置了字体颜色,子元素也会应用上相同的颜色。
当然并不是所有的样式都会被继承,这一点我们讲到具体样式 时,再去讨论。

11 权重的计算

内联样式:权重是 1000
id选择器:权重是 100
类、属性、伪类选择器:权重是 10
元素选择器:权重是 1
通配符:权重是 0

12 文本标签


em标签用于表示一段内容中的着重点。
strong标签用于表示一个内容的重要性。
这两个标签可以单独使用,也可以一起使用
通常em显示为斜体,而strong显示为粗体

i标签会使文字变成斜体。
b标签会使文字变成粗体
这两个标签和em和strong类似,但是这两 个标签没有语义。
所以根据html5标准,当我们只想设置文本 特殊显示,而不需要强调内容时
就可以使 用i和b标签。

small标签表示细则一类的旁注,通常包括 免责声明、注意事项、法律限制、
版权信 息等。
浏览器在显示small标签时会显示一个比父 元素小的字号。

使用cite标签可以指明对某内容的引用或参 考。例如,戏剧、文章或图书的标题,
歌 曲、电影、照片或雕塑的名称等。

《七龙珠》讲的是召唤神龙的故事。

blockquote和q表示标记引用的文本。 blockquote用于长引用,q用于短引用。 在两个标签中还可以使用cite属性来表示引 用的地址。 孟子曾经说过:
天将降大任于是人也...
他说的真对啊!

孔子曾经说过:学而时习之不亦说乎


sup和sub用于定义上标和下标。
上标主要用于表示类似于103中的3。
下标则用于表示类似余H2O中的2。

ins表示插入的内容,显示时通常会加上下 划线。
del表示删除的内容,显示时通常会加上删 除线。
如果你的内容包含代码示例或文件名,就 可以使用code元素。
pre元素表示的是预格式化文本,可以使用
pre包住code来表示一段代码。

function fun(){  alert("hello");
}

你可能感兴趣的:(12.20 伪元素 兄弟元素选择器 否定伪类_样式的继承_权重_伪类顺序_文本标签)