HTML+CSS+DIV网页设计与布局 作者 聂斌 第8章 认识CSS.pptVIP

8.3.8 相邻选择符 相邻选择符是一个比较有意思的选择符，该选择符作用在兄弟标签，但只能作用在相邻的两个兄弟标签之间，其语法代码为。 E1 + E2 {样式属性:属性值; 样式属性:属性值; ……} 8.3.9 属性选择符 前面所介绍过的选择符，有针对元素而声明的（如类型选择符）、有针对id值而声明的（ID选择符），CSS里还有一种选择符，是针对元素中的不同属性而声明的，这种选择符就是属性选择符（Attribute Selectors）。属性选择符的语法代码为： E[属性] {样式属性:属性值; 样式属性:属性值; ……} E[属性 = 属性值] {样式属性:属性值; 样式属性:属性值; ……} E[属性 ~= 属性值] {样式属性:属性值; 样式属性:属性值; ……} E[属性 | = 属性值] {样式属性:属性值; 样式属性:属性值; ……} 1.第一种表达方法 属性选择符第一种表达方式为： E[属性] {样式属性:属性值; 样式属性:属性值; ……} 这种属性选择符意思是：只要元素中包含该属性，就可以使用该样式，下面是一个属性选择符的样式声明。 p[align] {font-style:italic;} 该样式将会作用在所有还有align属性的p标签上，无论align的属性值是什么，例如以下3行代码都将使用该样式，即斜体。 p align=left文字/p p align=center文字/p p align=right文字/p 虽然以下代码在HTML中的意思与“p align=left文字/p”相同，但该行代码不能使用前面声明的CSS样式，因为在该行代码中，没有使用align属性。 p文字/p 2.第二种表达方式 属性选择符的第二种表达方式为： E[属性 = 属性值] {样式属性:属性值; 样式属性:属性值; ……} 这种属性选择符对属性的要求比上一次属性选择符对属性的要求要高一些，除了要求要有该属性，还必须要求属性值是什么。代码如下： p[align = “center”] {font-style:italic;} 该样式就只能作用在align属性值为“center”的p标签上，即只能作用在以下代码上。 p align=center文字/p 而不能作用在以下代码： p文字/p p align=left文字/p p align=right文字/p 3.第三种表达方式 属性选择符的第三种表达方式，代码如下： E[属性 ~= 属性值] {样式属性:属性值; 样式属性:属性值; ……} 这种表达方式可以让提供一种近似的属性值选择方式，“~=”符号就像是约等于。例如以下代码中的title属性值是一个字符串，并且该字符串中有用空格隔开的几个英文单词。 a href=# title=this is a Attribute Selectors属性选择符/a 那么这行代码可以被以下几个属性选择符匹配成功。 a [title ~= “this”] {font-style:italic;} a [title ~= “is”] {font-style:italic;} a [title ~= “a”] {font-style:italic;} a [title ~= “Attribute”] {font-style:italic;} a [title ~= “Selectors”] {font-style:italic;} 4.第四种表达方式 最后一种属性选择符的表达方式，代码如下： E[属性| = 属性值] {样式属性:属性值; 样式属性:属性值; ……} 这种属性选择符比上一种属性选择符所能匹配的范围要小得多，上一种属性选择符所能匹配的是单词，而这一种属性选择符只可以匹配以连字符（-）分隔的字符串，并且只能是以属性值开头的元素。代码如下：p[lang |= “en”] {font-style:italic;} 以上代码可以lang的属性为值en或者en-开头的p标签，例如以下代码都可以使用该样式。 p lang=en文字/p p lang=en-as文字/p p lang=en-us文字/p 而以下代码都不可以使用该样式： p文字/p p lang=fr文字/p 8.4 伪类和伪元素 伪类（pseudo-class）和伪元素（pseudo-element）可以说是在HTML文档里并不是实际存在的类和元素。伪类通常都是指某些元素的某个状态，比如超链接元素就存在四个状态：未访问过的链接、已访问过的链接、鼠标经过时的链接和鼠标单击时的链接。伪元素通常是指某个对象中某个元素的状态，例如，一行文字中第一个字符的样式等。 8.4.1 超链接的伪类 伪类最开始被提出来时，可以说完全是因为超链接，在CSS 1中只有三个伪类，即:link、