层叠样式表* (Cascading Style Sheets)
描述 HTML 文档样式的语言。描述应该如何显示 HTML 元素
css选择器
简单选择器
元素选择器
在此例中,所有 <p> 元素都将居中对齐,并带有红色文本颜色:
p {
color: red;
text-align: center;
}
Id选择器
这条 CSS 规则将应用于 id="para1" 的 HTML 元素:
id 名称不能以数字开头
#para1 {
......
}
CSS 类选择器
1、应用于 class="center" 的 HTML 元素:
.center {
......
}
2、只有具有 class="center" 的 <p> 元素会居中对齐:
p.center {
.......
}
CSS 通用选择器
影响页面上的每个 HTML 元素:
* {
.......
}
CSS 分组选择器
如h1、h2 和 p 元素具有相同的样式定义,可进行分组
h1, h2, p {
text-align: center;
color: red;
}
CSS 组合器
后代选择器 (空格)
后代选择器匹配属于指定元素后代的所有元素。
如下选择 <div> 元素内的所有 <p> 元素:
div p {
background-color: yellow;
}
子选择器 (>)
子选择器匹配属于指定元素子元素的所有元素。
如下选择属于 <div> 元素子元素的所有 <p> 元素:
div > p {
background-color: yellow;
}
相邻兄弟选择器 (+)
相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。
兄弟(同级)元素必须具有相同的父元素,“相邻”的意思是“紧随其后”。
如下选择紧随 <div> 元素之后的所有 <p> 元素:
div + p {
background-color: yellow;
}
通用兄弟选择器 (~)
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
如下选择属于 <div> 元素的同级元素的所有 <p> 元素:
div ~ p {
background-color: yellow;
}
伪类选择器
伪类用于定义元素的特殊状态。
例如,它可以用于:
设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式
悬停在 <div> 上
在 <div> 元素上使用 :hover 伪类的实例:
div:hover {
background-color: blue;
}
把鼠标悬停到 <div> 元素以显示 <p> 元素(类似工具提示的效果):
悬停到我上面来显示 <p> 元素。
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
匹配所有 <p> 元素中的首个 <i> 元素:
p i:first-child {
color: blue;
}
伪元素选择器
CSS 伪元素用于设置元素指定部分的样式。
例如,它可用于:
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容
为所有 <p> 元素中的首行添加样式:
::first-line 伪元素只能应用于块级元素。
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
::first-letter 伪元素用于向文本的首字母添加特殊样式。
::first-letter 伪元素只适用于块级元素
伪元素可以与 CSS 类结合使用:
以红色和较大的字体显示 class="intro" 的段落的首字母
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
::before 伪元素
::before 伪元素可用于在元素内容之前插入一些内容。
下面的例子在每个 <h1> 元素的内容之前插入一幅图像:
h1::before {
content: url(smiley.gif);
}
::after 伪元素
::after 伪元素可用于在元素内容之后插入一些内容。
::selection 伪元素
::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用于 ::selection:
color
background
cursor
outline
属性选择器
[attribute] 选择器
用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素;
a[target] {
background-color: yellow;
}
[attribute=“value”] 选择器
用于选取带有指定属性和值的元素。
下例选取所有带有 target="_blank" 属性的 <a> 元素:
a[target="_blank"] {
background-color: yellow;
}
[attribute~=“value”] 选择器
选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素:
[title~="flower"] {
border: 5px solid yellow;
}
会匹配以下属性的元素:title="flower"、title="summer flower" 以及 title="flower new",但不匹配:title="my-flower" 或 title="flowers"。
[attribute|=“value”] 选择器
于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素:
注释:值必须是完整或单独的单词,比如 class="top" 或者后跟连字符的,比如 class="top-text"。
[class|="top"] {
background: yellow;
}