CSS 样式表基础（八）——其他选择器

10、属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
如：
[title] { color:red; }
p[title] { font-size: 24pt; }
[title*="标题"] { color:green; }
例：

<html>
<head>
<title>CSS</title>
<style>
<--! 带有title属性的执行以下操作-->
[title] {
  color:red;
}
<--! 带有p title属性的执行操作，注意这次会覆盖上面的操作-->
p[title] {
  font-size: 24pt;
}
<--! 属性中包含“标题”两个字的执行以下操作 -->
[title*="标题"] {
  color:green;
}
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2 title="这是标题">HTML5网页设计</h2>
<p>这是第一段文字内容</p>
<p title="这是这段文字的title属性">这是第二段文字内容</p>
<p title="这段文字不是标题">这是第三段文字内容</p>
</body>
</html>

网页生成结果如下：
图片说明
结合代码和图片我们可以得知：

首先[title] { color:red; }，带有title属性的执行这步操作：也就是h2的“HTML5网页设计”、第二段和第三段文字内容两句话都应执行，字体颜色变为红色。
然后p[title] { font-size: 24pt; }，带有p title属性的执行这步操作：第二段和第三段文字内容两句话都应执行，字体大小变为24pt。
若修改的属性与上次重复或冲突，会覆盖上面的操作*（比如这次color：green，上次color：red，那么color应是green覆盖red）
最后[title*="标题"] { color:green; }，属性中包含“标题”两个字的执行这步操作：第三段文字内容执行，文字颜色变绿。

11、其他几个选择器

1) 后代选择器
后代选择器可以选择作为某元素后代的元素。如：
p em { color: red; } 表示作为 p 元素的任何后代的 em 元素

2) 子元素选择器
子元素选择器只能选择作为某元素子元素的元素。如：
p > em { color: red; } 表示作为 p 元素的子元素的 em 元素

3) 相邻兄弟选择器
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。如：
h2 + p { color: green; } 表示选择紧接在 h2 元素后出现的段落，h2 和 p 元素

拥有共同的父元素。

4) 兄弟选择器
如：h2 ~ p 表示h2后面的所有同级的p元素。

例：

<html>
<head>
<title>CSS</title>
<style>
p { font-size: 16pt; color: blue; }
p em { color: red; }
h2 + p { color: green; }
</style>
</head>
<body>
<h1>宜春学院</h1>
<h2>HTML5<em>网页设计</em></h2>
<p>这是<em>第一段</em>文字内容</p>
<p>这是第二段文字内容</p>
<p>这是第三段文字内容</p>
</body>
</html>

图片说明

12、伪类

:first-child 向元素的第一个子元素添加样式。
:nth-child(n) 第n个元素
可以用even、odd来代替 2n、2n+1

例

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
<style>
  body {
    background-color: #9ff;
  }
  p:first-letter {
    font-size: 200%;
  }
  p:hover {
    color: red;
  }
</style>
</head>
<body>
<h1><em>网页设计</em></h1>
<p>Hello，World！</p>
<p>网页设计 HTML 文档和 HTML 元素是通过HTML签进行标记的HTML 标签由开始标签和结束标签组成，开始标签是被括号包围的元素名，结束标签是被括号包围的斜杠和元素名，某些 HTML 元素没有结束标签。 </p>
</body>
</html>

图片说明
em标签表示语气加重，故为斜体。
p:first-letter表示p的第一个字符执行，故可看到图片中两个p文本的第一个字的大小都变大了。
hover表示鼠标覆盖文字时的样式，覆盖时字体颜色变红。