CSS选择器
css元素选择器
- css元素选择器是最基本的选择器。
- 在W3C标准中，元素选择器又称为类型选择器。
- “类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
h1 {
font-family: sans-serif;
}
css分组
- 将多个元素放在规则左边，然后用逗号分隔，就定义了一个分组。右边的样式将应用到左边的所有引用元素中。
/* 没有分组 */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* 分组 */
h1, h2, h3, h4, h5, h6 {color:blue;}
- 分组提供了一些有意思的选择👇
/* 分组 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}
/* 分组 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}
/* 分组 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}
- 👆 上述三种分组规则是等价的。
通配符选择器
- 通配符选择器显示为一个“
*”。该选择器可以与任何元素匹配，就像是一个通配符。 - 规定使文档中的每一个元素都为红色👇
* {color:red;}
声明分组
- 我们既可以对选择器分组，也可以对声明分组。
- 注意：对声明分组，一定要在各个声明的最后使用分号。因为浏览器会忽略样式表中的空白符。
/* 没有分组 */
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
/* 分组 */
h1 {
font: 28px Verdana;
color: blue;
background: red;
}
css类选择器
- 类选择器允许以一种独立于文档元素的方式来指定样式。
- 该选择器可以单独使用，也可以于其他元素结合使用。
- 注意：类选择器和id选择器可能区分大小写，这取决去文档的语言。
- 使用类选择器之前需要修改具体的文档标记：将
class指定为一个适当的值👇
<h1 class="important">
这个标题很重要。
</h1>
<p class="important">
这个段落很重要。
</p>
- 然后我们使用下列语法向这些归类的元素应用样式。
.important {
color:red;
}
- 我们可以结合元素选择器来给包含“
important”的不同元素指定样式👇
p.important {
color:red;
}
h1.important {
color:blue;
}
css多类选择器
- 当HTML中，一个
class值中包含多个词时，各个词之间用空格分隔👇
<p class="important warning">
这个段落是一个非常重要的警告。
</p>
- 当我们对这个元素指定样式的时候可以写成👇
.important {
font-weight:bold;
}
.warning {
font-style:italic;
}
.important.warning {
background:silver;
}
- 我们翻译一下：
为class中包含important的所有元素设置为粗体。
为class中包含warneng的所有元素设置为斜体。
为class中包含important和warning的所有元素设置一个银色背景。 - 如果把多个类选择器链接在一起使用，则可以选择同时包含这些类名的元素（类名的顺序不限）。但是如果在类名列表中出现一个不存在的类名，匹配就会失效👇
.important.urgent {
background:silver;
}
- 👆上面的规则中
urgent没有在class中出现，所以这条样式不能匹配。但是可以匹配下面这个元素。👇
<p class="important urgent warning">
这个段落是一个非常重要且紧急的警告。
</p>
cssID选择器
- id选择器允许以一种独立于文档元素的方式来指定样式。
- 在某些方面，id选择器类似于类选择器，不过也有一些重要差别。
语法
- 首先，id选择器前面有一个#号。
- 与类选择器一样，id选择器中可以忽略通配符。
- 与类选择器不同的是id选择器不引用
class属性的值，而是引用id属性的值。
#intro {
font-weight:bold;
}
<p id="intro">
这个段落是一个介绍。
</p>
- 在一个文档中，id选择器仅仅使用一次。
- id选择器不能多个结合使用，因为
id属性不允许有以空格分隔的词列表。 - 注意：类选择器和id选择器可能区分大小写，这取决去文档的语言。
css属性选择器
简单属性选择
-
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
-
例子1：
希望把包含标题（
title）的所有元素变成红色。
*[title] {
color:red;
}
- 例子2:
希望只对有
href属性的链接文本变成红色。
a[href] {
color:red;
}
- 例子3：
希望将同时有
href和title属性的链接的文本设置为红色。
a[href][title] {
color:red;
}
根据具体属性值选择
- 除了选择拥有某些属性的元素 ，还可以进一步缩小选择范围，只选择有特定属性值的元素。
- 例子1：
希望将指向百度的超链接变成红色。
a[href="http://www.baidu.com"] {
color: red;
}
- 例子2：
希望见多个属性-值选择器链接在一起来选择一个文档。
a[href="http://www.baidu.com"][title="百度"] {
color: red;
}
- 属性与属性值必须完全匹配
根据部分属性值选择
- 如果需要根据属性值中的某个值进行选择，则需要使用波浪号（
~）
img[title~="百度"] {
border: 1px solid gray;
}
- 子串匹配属性选择器
| 选择器 | 描述 |
|---|---|
[attribute=value] | 用于选取带有指定属性和值的元素。 |
[attribute~=value] | 用于选取属性值中包含指定词汇的元素。 |
[attribute|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
[attribute^=value] | 匹配属性值以指定值开头的每个元素。 |
[attribute$=value] | 匹配属性值以指定值结尾的每个元素。 |
[attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
css后代选择器
- 后代选择器又称为包含选择器
根据上下文选择元素
- 我可以定义后代选择器创建一些规则，使这些规则在某些文档结构中其作用，而在另一些结构中不起作用。
- 举个例子，如果我们希望只对
h1元素中的em元素应用样式
h1 em {color:red;}
<h1>这是一个<em>重要的</em>标题</h1>
<p>这是一个<em>重要的</em>段落。</p>
👇运行结果👇
- 后代选择器有一个易忽略的方面——两个元素之间的层次间隔可以是无限的。
css子元素选择器
- 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
- 子选择器使用了大于号（
>）。子结合（>）符两边可以有空白符
h1 > strong {color:red;}
<h1>这是<strong>非常</strong> <strong>非常</strong>重要的。</h1>
<h1>这是<em>非常<strong>非常</strong></em>重要的。</h1>
👇运行结果👇
结合后代选择器和子选择器
table.company td > p{
}
- 👆上面的选择器会选择作为
td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company的class属性。
css相邻兄弟选择器
- 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
- 比如，如果要设置紧接在
h1元素后出现的段落的上边距👇
h1 + p {
margin-top:50px;
}
- 相邻兄弟选择器使用加号（
+），与字结合符一样，相邻兄弟结合符旁边可以有空白。
结合其他选择器
html > body table + ul {
margin-top:20px;
}
- 👆上面的选择器会选择紧接在
table元素后出现的所有兄弟ul元素，该元素包含在一个body元素中，body元素本身是html元素的子元素。
css伪类
- css伪类用于向某些选择器添加特殊的效果。
语法
selector : pseudo-class {
property: value
}
selector.class : pseudo-class {
property: value
}
链接伪类
- 在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在css定义中，
a：hover必须被置于a：link和a：visited之后，才是有效的。
提示：在css定义中，a：active必须被置于a：hover之后，才是有效的。
提示：伪类名称对大小写不敏感。
伪类与css类
- 伪类可以和css类配合使用：👇
a.red : visited {
color: #FF0000
}
<a class="red" href="http://www.baidu.com">百度</a>
- 假如上边的链接被访问过，那么它将显示为红色。
first-child伪类
- 我们可以使用：
first-child伪类来选择元素的第一个子元素。 - 必须声明
<!DOCTYPE>，这样first-child才能生效。 - 例子1：
匹配第一个
<p>元素
p:first-child {
}
- 例子2：
匹配所有
<p>元素中的第一个<i>元素
p > i:first-child {
font-weight:bold;
}
- 例子3：
匹配第一个
<p>元素中的所有<i>元素
p:first-child i {
color:blue;
}
:lang伪类
:lang伪类向带有指定:lang属性的元素添加样式。- 说明：
:lang伪类根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从css指定。:lang的处理与|=选择器相同。
css伪元素
- css伪元素用于向某些选择器设置特殊效果。
语法
selector:pseudo-element {
property:value;
}
selector.class:pseudo-element {
property:value;
}
:first-line伪元素
- "
first-line"伪元素用于向文本的首行设置特殊样式。 - 设置对
p元素的第一行文本👇
p:first-line {
}
- “
first-line”伪元素只能用于块级元素。 - 下面的属性可以应用于“
first-line”伪元素fontcolorbackgroundwork-spacingletter-spacingtext-transformline-heightclear
:first-letter伪元素
first-letter伪元素用于向文本的首字母设置特殊样式。
p:first-letter{
}
- 下面的属性可应用于“
first-letter”伪元素fontcolorbackgroundmarginpaddingbordertext-decorationvertical-align（仅当float为none时）text-transformline-heightfloatclear
伪元素和css类
- 伪元素可以与css类配合使用：👇
p.important:first-letter{
color: #FF0000;
}
<p class="important">This is important the paragraph。</p>
- 👆上面的例子会使所有
class为important的段落的首字母变成红色。
多重伪元素
- 可以结合多个伪元素来使用。
- 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为
xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：👇
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line{
color:#0000ff;
font-variant:small-caps;
}
:before伪元素
- “
:before”伪元素可以在元素的内容前面插入新内容。 - 希望在每个
<h1>元素前面插入一副图片：
h1:before{
content:url(demo.gif);
}
:after伪元素
- “
:after”伪元素可以在元素的内容之后插入新的内容。 - 希望在每个
<h1>元素后面插入一副图片：
h1:after{
content:url(demo.gif);
}
扫一扫
2695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
