文章目录
第9章
第9章 定义选择器
9.1 构造选择器
- 5种选择器标准
1.元素的名称
h1{
color:red;
}
2.元素所在的上下文
h1 em{ /* em所在的上文是h1 */
color:red;
}
3.元素的类或id
.error{ /* error是类名 */
color:red;
}
#gaudi{ /* guadi是id名 */
color:red;
}
/* 非必要的另外一个方法——在类名或id前加上其所属元素，会增强其特殊性 */
strong.error{
color:red; /*该选择器只适应于strong元素，而不适应同样拥有error类名的其他元素 */
}
4.元素的伪类或者伪元素
a:link{
color:red
}
5.元素的属性或者属性的值
a[title]{ /* 选择a元素的title属性*/
color:red;
}
a[title="https://www.baidu.com"]{ /*选择a元素中title属性的值 */
color:red;
}
提示 编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。
9.2 按名称选择元素
- 类型选择器：选择元素的名称
h1{
color:red;
}
提示 通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。
9.3 按类或ID选择元素
- 类选择器：
.classname{...} - id选择器：
#id{...}
提示 可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。
9.4 按上下文选择元素
- 上下文选择器：根据元素的祖先、父元素或同胞元素来定位
<article>
<h1>Hello</h1>
<p>hello world</p>
<p>hello neighbor</p> <!-- 两个二代的<p>元素 -->
<section>
<p>hello son<p> <!-- 三代的<p>元素 -->
</section>
</article>
1.按祖先元素的祖先
/* ancestor祖先选择器，descendant目标元素选择器 */
ancestor descendant{
...
}
2.按父元素
/*parent是父选择器，child是子选择器*/
parent>child{
...
}
3.按同胞元素
- 相邻同胞结合符
+：可以选择直接跟在指定的同胞元素后面的同胞元素
sibling+element{
...
}
- 普通同胞结合符
~：可以选择那些并非直接出现在另一同胞元素后面的同胞元素
sibling~element{
...
}
9.5 选择第一个或最后一个子元素
first-child和last-child伪类：可以选择某元素的第一个或最后一个子元素进行格式化
<head>
<title></title>
<style type="text/css">
li:first-child{
color: red;
}
li:last-child{
color:green;
}
</style>
</head>
<body>
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>
</body>
9.6 选择元素的第一个字母或者第一行
first-letter伪元素：只选择元素的第一个字母
`first-letter可以实现每段首字母大写大写的效果
p:first-letter{
color:red;
font-size:1.4em;
font-weight:bold;
}
first-line伪元素：只选择元素的第一行
调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行
p:first-line{
color:red;
}
提示 只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。
提示 第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性
- CSS3语法
- 伪元素：
::first-line、::first-letter、::before、::after - 伪类：
:first-child、:link、:hover等
未来，
::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。
9.7 按状态选择链接元素
<head>
<title></title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: orange;
}
a:focus{
color: purple;
}
a:hover{
color: green;
}
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" title="百度">打开百度</a>
</body>
- CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性
- 输入
link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观 - 输入
visited以设置访问者已激活过的链接的外观 - 输入
focus，前提是链接是通过键盘选择并已准备好激活的 - 输入
hover以设置光标指向链接时链接的外观 - 输入
active以设置激活过的链接的外观
提示 要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。
提示 也可以对其他类型的元素使用
:active和:hover伪类。例如，设置p:hover { color: red; }以后，鼠标停留在任何段落上段落都会显示为红色
提示 由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）
9.8 按属性选择元素
| 选择器 | 属性值 |
|---|---|
[attribute]` |
匹配指定属性，不论具体值是什么 |
[attribute="value"] |
完全匹配指定属性值 |
[attribute~="value"] |
属性值是以空格分隔的多个单词，其中有一个完全匹配指定值 |
[attribute|="value"] |
属性值以value-打头 |
[attribute^="value"] |
属性值以value开头，value为完整的单词或单词的一部分 |
[attribute$="value"] |
属性值以value结尾，value为完整的单词或单词的一部分 |
[attribute*="value"] |
属性值为指定值的子字符串 |
9.1 构造选择器
- 5种选择器标准
1.元素的名称
h1{
color:red;
}
2.元素所在的上下文
h1 em{ /* em所在的上文是h1 */
color:red;
}
3.元素的类或id
.error{ /* error是类名 */
color:red;
}
#gaudi{ /* guadi是id名 */
color:red;
}
/* 非必要的另外一个方法——在类名或id前加上其所属元素，会增强其特殊性 */
strong.error{
color:red; /*该选择器只适应于strong元素，而不适应同样拥有error类名的其他元素 */
}
4.元素的伪类或者伪元素
a:link{
color:red
}
5.元素的属性或者属性的值
a[title]{ /* 选择a元素的title属性*/
color:red;
}
a[title="https://www.baidu.com"]{ /*选择a元素中title属性的值 */
color:red;
}
提示 编写CSS的一个重要目标就是让选择器尽可能的简单，仅保持必要的特殊性。应该充分利用样式的层叠特性，即元素的后代会继承祖先元素的样式。同时，应该将页面中的通用设计元素挑选出来，编写一个选择器（如类名），从而可以在全站不同的元素上共享该样式。这样，样式表通常会变得更小，也更容易维护。
9.2 按名称选择元素
- 类型选择器：选择元素的名称
h1{
color:red;
}
提示 通配符*（星号）匹配代码中的任何元素名称。例如，使用* { border: 2px solid green; }会让每个元素都有一个2像素宽的绿色实线边框！因为匹配范围太广，会让浏览器加载页面变慢，因此应该谨慎使用通配符。实际适合使用通配符的情况比较少。
9.3 按类或ID选择元素
- 类选择器：
.classname{...} - id选择器：
#id{...}
提示 可以单独使用class和id，也可以同其他选择器标准混在一起使用。例如，.news { color: red; }会影响所有属于news类的元素，而h1.news { color: red; }只会影响属于news类的h1元素。除非必须特别针对目标元素，最好不要在id或class选择器中添加元素名称。
9.4 按上下文选择元素
- 上下文选择器：根据元素的祖先、父元素或同胞元素来定位
<article>
<h1>Hello</h1>
<p>hello world</p>
<p>hello neighbor</p> <!-- 两个二代的<p>元素 -->
<section>
<p>hello son<p> <!-- 三代的<p>元素 -->
</section>
</article>
1.按祖先元素的祖先
/* ancestor祖先选择器，descendant目标元素选择器 */
ancestor descendant{
...
}
2.按父元素
/*parent是父选择器，child是子选择器*/
parent>child{
...
}
3.按同胞元素
- 相邻同胞结合符
+：可以选择直接跟在指定的同胞元素后面的同胞元素
sibling+element{
...
}
- 普通同胞结合符
~：可以选择那些并非直接出现在另一同胞元素后面的同胞元素
sibling~element{
...
}
9.5 选择第一个或最后一个子元素
first-child和last-child伪类：可以选择某元素的第一个或最后一个子元素进行格式化
<head>
<title></title>
<style type="text/css">
li:first-child{
color: red;
}
li:last-child{
color:green;
}
</style>
</head>
<body>
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>
</body>
9.6 选择元素的第一个字母或者第一行
first-letter伪元素：只选择元素的第一个字母
`first-letter可以实现每段首字母大写大写的效果
p:first-letter{
color:red;
font-size:1.4em;
font-weight:bold;
}
first-line伪元素：只选择元素的第一行
调整浏览器窗口会改变每段第一行的具体内容，但选择器选中的始终是第一行
p:first-line{
color:red;
}
提示 只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。
提示 第一个字母前面的标点符号（如引号）会被当做第一个字母的一部分，一同被格式化。现代浏览器都支持这一特性
- CSS3语法
- 伪元素：
::first-line、::first-letter、::before、::after - 伪类：
:first-child、:link、:hover等
未来，
::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。
9.7 按状态选择链接元素
<head>
<title></title>
<style type="text/css">
a:link{
color: red;
}
a:visited{
color: orange;
}
a:focus{
color: purple;
}
a:hover{
color: green;
}
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" title="百度">打开百度</a>
</body>
- CSS允许根据链接的当前状态对它们进行格式化，参见图9.7.1。链接的状态包括访问者是否将鼠标停留在链接上，链接是否被访问过，等等。可以通过一系列伪类实现这一特性
- 输入
link以设置从未被激活或指向，当前也没有被激活或指向的链接的外观 - 输入
visited以设置访问者已激活过的链接的外观 - 输入
focus，前提是链接是通过键盘选择并已准备好激活的 - 输入
hover以设置光标指向链接时链接的外观 - 输入
active以设置激活过的链接的外观
提示 要对链接指定样式，不一定要指定伪类（因此第(2)步和第(3)步都是可选的步骤）。例如，使用a { color: red; }会让链接的所有状态显示为同一种样式。不过，最好使用伪类区分不同状态的样式，这样做可以方便访问者。
提示 也可以对其他类型的元素使用
:active和:hover伪类。例如，设置p:hover { color: red; }以后，鼠标停留在任何段落上段落都会显示为红色
提示 由于链接可能同时处于多种状态（如同时处于激活和鼠标停留状态），且晚出现的规则会覆盖前面出现的规则，所以，一定要按照下面的顺序定义规则：link、visited、focus、hover、active（缩写为LVFHA）
9.8 按属性选择元素
| 选择器 | 属性值 |
|---|---|
[attribute]` |
匹配指定属性，不论具体值是什么 |
[attribute="value"] |
完全匹配指定属性值 |
[attribute~="value"] |
属性值是以空格分隔的多个单词，其中有一个完全匹配指定值 |
[attribute|="value"] |
属性值以value-打头 |
[attribute^="value"] |
属性值以value开头，value为完整的单词或单词的一部分 |
[attribute$="value"] |
属性值以value结尾，value为完整的单词或单词的一部分 |
[attribute*="value"] |
属性值为指定值的子字符串 |
