选择器
CSS 选择器用于“查找”（或选取）要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类：
1.简单选择器（根据名称、id、类来选取元素）
2.组合器选择器（根据它们之间的特定关系来选取元素）
3.伪类选择器（根据特定状态选取元素）
4.伪元素选择器（选取元素的一部分并设置其样式）
5.属性选择器（根据属性或属性值来选取元素
1.简单选择器
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
p {
text-align: center;
color: red;
}
id 选择器
id 选择器使用 HTML 元素的 id 属性来选择特定元素。
元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！
要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
</body>
</html>
类选择器
类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。
HTML 元素也可以引用多个类。
<p class="center large">这个段落引用两个类。</p>
.center {
text-align: center;
color: red;
}
.large {
text-align: center;
color: red;
}
通用选择器
通用选择器（*）选择页面上的所有的 HTML 元素。
分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
h1, h2, p {
text-align: center;
color: red;
}
2.组合器
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器：
后代选择器 (空格)
子选择器 (>)
相邻兄弟选择器 (+)
通用兄弟选择器 (~)
后代选择器
div p {
background-color: yellow;
}
子选择器
div > p {
background-color: yellow;
}
相邻兄弟选择器
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。指定元素后面得一个
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
下面的例子选择紧随 <div> 元素之后的所有 <p> 元素：
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>
<div>
<p>div 中的段落 1。</p>
<p>div 中的段落 2。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
通用兄弟选择器
通用兄弟选择器匹配属于指定元素后面的同级元素的所有元素。
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>
<p>段落 1。</p>
<div>
<p>段落 2。</p>
</div>
<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>
</body>
</html>
3.伪类
伪类用于定义元素的特殊状态。
例如，它可以用于：
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色：
a.highlight:hover {
color: #ff0000;
}
简单的工具提示悬停
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
:first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。
匹配首个 <p> 元素
p:first-child {
color: blue;
}
:lang 伪类
:lang 伪类允许您为不同的语言定义特殊的规则。
<html>
<head>
<style>
q:lang(en) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
4.伪元素
CSS 伪元素用于设置元素指定部分的样式。
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
::first-line
::first-line 伪元素用于向文本的首行添加特殊样式。 伪元素只能应用于块级元素。
- 字体属性
- 颜色属性
- 背景属性
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
在 CSS3 中，双冒号取代了伪元素的单冒号表示法。这是 W3C 试图区分伪类和伪元素的尝试。
在 CSS2 和 CSS1 中，伪类和伪元素都使用了单冒号语法。
为了向后兼容，CSS2 和 CSS1 伪元素可接受单冒号语法。
::first-letter 伪元素
::first-letter 伪元素用于向文本的首字母添加特殊样式。
伪元素可以与 CSS 类结合使用
<!DOCTYPE html>
<html>
<head>
<style>
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
</style>
</head>
<body>
<p class="intro">这是一段简介！</p>
<p>这是一段文字。以及更多的文字。</p>
</body>
</html>
::before 伪元素 ::after 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
::after 伪元素可用于在元素内容之后插入一些内容。
h1::before {
content: url(smiley.gif);
}
h1::after {
content: url(smiley.gif);
}
::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection：
color
background
cursor
outline
5.属性选择器
为带有特定属性的 HTML 元素设置样式
我们可以设置带有特定属性或属性值的 HTML 元素的样式。
CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。
CSS [attribute="value"] 选择器
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素：
[title~="flower"] {
border: 5px solid yellow;
}
CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：
注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。下例选取 class 属性以 "top" 开头的所有元素：提示：值不必是完整单词！
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] 选择器
[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
下例选取 class 属性以 "test" 结尾的所有元素：
提示：值不必是完整单词！
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器选取属性值包含指定词的元素。
下例选取 class 属性包含 "te" 的所有元素：
提示：值不必是完整单词
[class*="te"] {
background: yellow;
}
设置表单样式
<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type=button] {
width: 120px;
margin-left: 315px;
display: block;
}
</style>
</head>
<body>
<h1>添加表单样式</h1>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Bill" size="20">
Lastname:<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
网友评论