CSS基本属性与选择器清单
CSS常用基本属性
CSS背景
属性 | 描述 | 属性值 |
---|---|---|
background | 简写属性 | |
background-color | 设置元素的背景颜色 | color_name, hex_number, rgb_number |
background-image | 把图像设置为背景 | none, url(‘URL’) |
background-repeat | 设置背景图像是否及如何重复 | repeat, no-repeat, repeat-x,repeat-y |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 | scroll, fixed |
background-position | 设置背景图像的起始位置 | xpos ypos (center, top, bottom, left, right) , height, % |
background
为了简化这些属性的代码,我们可以将这些属性合并在同一个属性中,顺序为以上列表顺序,属性无需全部使用。
body {
background:#ffffff url('img_tree.png') no-repeat right top;
}
background-color
h1 {
background-color:red; /*颜色名称*/
}
p {
background-color:#e0ffff;/*十六进制*/
}
div {
background-color:rgb(255,0,0);/*RGB*/
/*
color_name , hex_number , rgb_number
transparent: 默认,背景颜色透明
*/
}
background-image
默认情况下,背景图像进行水平和垂直方向的平铺重复显示,以覆盖整个元素实体。
body {
background-image:url('paper.gif');
/*
url('URL') , none
*/
}
background-repeat
body {
background-repeat:no-repeat;
/*
repeat: 默认,在垂直方向和水平方向平铺
no-repeat:不平铺,只显示一次
repeat-x:水平平铺
repeat-y:垂直平铺
*/
}
background-attachment
body {
background-attachment:fixed;
/*
scroll:默认,图片会随文档滚动
fixed:相对于可视区固定
*/
}
background-position
body{
background-position:center top;
/*方位:
xpos ypos :(center top bottom left right)一般由两个关键字组成,为垂直位置和水平位置,若有省略默认补齐center
% , length:一般由两个关键字组成,依次为向右偏移量和向下偏移量,有省略默认补齐50%( % 和 length 可以混用)
*/
}
CSS文本
属性 | 描述 | 属性值 |
---|---|---|
color | 设置文本颜色 | color_name, hex_number, rgb_number |
direction | 设置文本方向 | ltr, rtl |
line-height | 设置行高 | normal, length, %, number |
letter-spacing | 设置字符间距 | normal, length |
text-align | 设置元素中文本的对齐方式 | left, right, center, justify |
text-decoration | 向文本添加修饰 | none, underline, overline, line-through, blink |
text-indent | 缩进元素中文本的首行 | length, % |
text-transform | 控制元素中的字母 | none, uppercase, lowercase, capitalize |
unicode-bidi | 设置文本方向 | normal, embed, bidi-override, initial |
white-space | 设置元素中空白的处理方式 | normal, pre, nowrap, pre-line, pre-wrap |
word-spacing | 设置字间(字、单词)间距 | normal, length |
color
body {
color:red;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
/*
color_name hex_number rgb_number
*/
}
direction
对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
p {
direction:ltr;
/*
ltr: 默认,文本方向从左到右
rtl: 文本方向从右到左
*/
}
可以看到 rtl 属性并不是真的从右往左书写,只是把标点符号写到了左边。
line-height
p {
line-height: 3;
/*
normal:默认,设置合理的行间距
length , % : 不允许使用负值
number: 设置数字,此数字会与当前的字体尺寸相乘来设置行间距
*/
}
letter-spacing
若是英文文本,则 letter-space 指的是字母与字母之间的间距。
h1 {
letter-spacing: -0.5em;
/*
normal:默认,规定字符间没有额外的空间
length:可以接受正长度值或负长度值
*/
}
text-align
body {
text-align:center;
/*
left:默认
right , center
justify:文本行的左右两端都放在父元素的内边界上,调整单词和字母间的间隔,使各行的长度恰好相等
*/
}
text-decoration
a {
text-decoration: underline;
/*
none:一般文本的默认值(除链接外),用于关闭所有装饰
underline:下划线
overline:上划线
line-through:删除线
blink:让文本闪烁(IE、Chrome、Safari不支持)
*/
}
a {
text-decoration: underline overline;
/*可以在一个规则中结合多种装饰*/
}
text-indent
一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。
p {
text-indent:50px;
/*
length , % :允许使用负值
*/
}
使用负值还可以实现比如“悬挂缩进”,不过要小心首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {
text-indent: -5em;
padding-left: 5em;
}
text-transform
h1 {
text-transform: uppercase;
/*
none:默认值,对文本不做任何改动
uppercase:全大写
lowercase:全小写
capitalize:将每个单词的首字母大写,但其它字母不做改动
*/
}
unicode-bidi
div {
direction:rtl;
unicode-bidi:bidi-override;
/*
normal: 默认,不使用附加的嵌入层面
embed: 创建一个附加的嵌入层面
bidi-override: 创建一个附加的嵌入层面,重新排序取决于direction属性
initial:设置该属性为它的默认值
*/
}
当添加了 “bidi-override” 属性之后,可以看到第一行真正的是从右向左书写了。
white-space
空白符处理是把所有空白符合并为一个空格,忽略换行字符。
p {
white-space: normal;/*浏览器默认*/
/*
空白符 换行符 自动换行
normal: 合并 忽略 允许 (默认)
pre: 保留 保留 不允许
nowrap: 合并 忽略 不允许
pre-line: 合并 保留 允许 (兼容性不好)
pre-wrap: 保留 保留 允许 (兼容性不好)
*/
}
word-spacing
若是英文文本,则 word-space 指的是单词与单词之间的间距。
p {
word-spacing: 30px;
/*
normal:默认,定义单词间的标准空间
length:允许使用负值
*/
}
CSS字体
属性 | 描述 | 属性值 |
---|---|---|
font | 简写属性,作用是把所有针对字体的属性设置在一个声明中 | |
font-family | 设置字体系列 | |
font-size | 设置字体的尺寸 | length,% |
font-style | 设置字体风格 | normal, italic, oblique |
font-variant | 以小型大写字体或者正常字体显示文本 | normal, small-caps |
font-weight | 设置字体的粗细 | normal, bold, bolder, lighter, 100-900(整百) |
font
可设置的属性是(按顺序):font-style font-variant font-weight font-size/line-height font-family
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入。
p {
font:italic bold 12px/30px Georgia,serif;
}
font-family
在CSS中,有两种不同类型的字体系列:通用字体系列与特定字体系列。
p {
font-family: sans-serif;
/*
除了特定的字体系列外,CSS的五种通用字体系列:
Serif Sans-serif Monospace Cursive Fantasy
*/
若使用特定字体,会产生一个问题,如果用户代理上没有安装该字体,就只能使用用户代理的默认字体来显示元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题:
h1 {
font-family: Georgia, "宋体", "Times New Roman", Times, serif;
}
属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,将尝试下一种字体。
font-size
管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落,请务必正确使用HTML标签。
p {
font-size: 2.5em;
/*
常用:length, %
*/
}
font-style
p {
font-style: italic;
/*
normal: 文本正常显示
italic: 文本斜体显示
oblique: 文本倾斜显示
*/
}
italic 和 oblique 的区别
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
font-variant
p {
font-variant: small-caps;
/*
normal: 默认,标准字体
small-caps:浏览器会显示小型大写字母的字体
*/
}
<p>This is a paragraph</p>
font-weight
p {
font-weight: bold;
/*
normal, bold, bolder, lighter
100, 200, 300, 400, 500, 600, 700, 800, 900(其中400等同于normal,700等同于bold)
*/
}
一般,字体所拥有的字重的数量实际很少存在满足有9个字重的,通常字体用有的字重数量为4至6个。但不必担心,起码400和700对应的字重至少是每重字体必备的。
CSS列表
属性 | 描述 | 属性值 |
---|---|---|
list-style | 简写属性,用于把所有用于列表的属性设置于一个声明中 | |
list-style-image | 将图象设置为列表项标志 | none, url(‘URL’) |
list-style-position | 设置列表中列表项标志的位置 | outside, inside |
list-style-type | 设置列表项标志的类型 | disc, circle, square, decimal… |
CSS列表项标记可以为有序列表(数字或字母等)、无序列表(小黑点或小黑框等)、图像。
list-style
简写属性,list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
li {
list-style : url(example.gif) square inside;
}
list-style-image
ul {
list-style-image: url('arrow.jpg');
/*
none , url('URL')
*/
list-style-type: square;
}
<ul>
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
请始终规定一个 list-style-type 属性以防图像不可用。
list-style-position
ul {
list-style-position:inside;
/*
outside: 默认值,保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐
inside: 列表项目标记放置在文本以内,且环绕文本根据标记对齐
*/
}
list-style-type
ul.circle {
list-style-type:circle;
}
ul.square {
list-style-type:square;
}
ol.upper-roman {
list-style-type:upper-roman;
}
ol.lower-alpha {
list-style-type:lower-alpha;
/* 常用的属性:
disc:默认,标记是实心圆
circle:标记是空心圆
square:标记是实心方块
decimal:标记是数字
lower-roman/upper-roman:小写/大写罗马数字
lower-alpha/upper-alpha:小写/大写英文字母
lower-latin/upper-lation:小写/大写拉丁字母
*/
}
CSS表格
属性 | 描述 | 属性值 |
---|---|---|
boder-collapse | 设置是否把表格边框合并为单一的边框 | separate, collapse |
boder-spacing | 设置分隔单元格边框的距离 | length length |
caption-side | 设置表格标题的位置 | top, bottom |
empty-cells | 设置是否显示表格中的空单元格 | hide, show |
table-layout | 设置显示单元、行和列的算法 | automatic, fixed |
若需要在CSS中设置表格边框,请使用 border 属性;
表格宽度和高度,可以通过 width 和 height 属性定义;
表格文本对齐,可以通过 text-align 和 vertical-align 属性定义;
如需控制表格中内容与边框的距离,可以为 td 和 th 设置 padding 属性。
border-collapse
table,th,td {
border:1px solid blue;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Bill</td>
<td>Gates</td>
</tr>
<tr>
<td>Steven</td>
<td>Jobs</td>
</tr>
</table>
上面的例子,表格具有双线条边框,这是因为table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框,请使用 border-collapse 属性。
table {
border-collapse:collapse;
/*
separate: 默认值,边框会被分开,不会忽略border-spacing和empty-cells属性
collapse: 如果可能,边框会合并为一个单一的边框,忽略border-spacing和empty-cells属性
*/
}
table,th, td {
border: 1px solid blue;
}
border-spacing
仅用于边框分离模式。
table {
border-collapse:separate;
border-spacing:10px 50px;
/*
length length:如果定义一个 length 参数,那么定义的是水平和垂直间距。如果定义两个 length 参数,那么第一个设置水平间距,而第二个设置垂直间距。
*/
}
caption-side
caption {
caption-side:bottom;
/*
top:默认值,把表格标题定位在表格之上。
bottom:把表格标题定位在表格之下。
*/
}
empty-cells
仅用于边框分离模式。
table {
border-collapse:separate;
empty-cells:hide;
/*
hide:不在空单元格周围绘制边框
show:默认,在空单元格周围绘制边框
*/
}
table-layout
table {
table-layout:fixed;
/*
automatic: 默认,列宽度由单元格内容设定
fixed: 列宽由表格宽度和列宽度设定
*/
}
CSS轮廓与边框
属性 | 描述 | 属性值 |
---|---|---|
outline | 在一个声明中设置所有的轮廓属性 | |
outline-color | 设置轮廓的颜色 | color_name, hex_name, rgb_name |
outline-style | 设置轮廓的样式 | none, dotted, dashed, solid, double… |
outline-width | 设置轮廓的宽度 | thin, medium, thick, length |
border | 简写属性,用于把针对四个边的属性设置在一个声明 | |
border-style | 简写属性,用于设置元素所有边框的样式,或者单独地为各边设置边框样式 | none,dotted, dashed, solid, double… |
border-width | 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度 | thin, medium, thick, length |
border-color | 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色 | color_name, hex_name, rgb_name |
border-bottom border-left border-right border-top | 简写属性,用于把下/左/右/上边框的所有属性设置到一个声明中 | |
border-bottom-color border-left-color border-right-color border-top-color | 设置元素的下/左/右/上边框的颜色 | color_name, hex_name, rgb_name |
border-bottom-style border-left-style border-right-style border-top-style | 设置元素的下/左/右/上边框的样式 | none, dotted, dashed, solid, double… |
border-bottom-width border-left-width border-right-width border-top-width | 设置元素的下/左/右/上边框的宽度 | thin, medium, thick, length |
outline
p {
outline:#00ff00 dotted thick;
}
outline 简写属性在一个声明中设置所有的轮廓属性,可以按以上表格顺序设置属性。
outline-color
p {
outline-color:#00ff00;
/*
color_name, hex_number, rgb_number
invert:默认,执行颜色反转,可使轮廓在不同的背景颜色中都是可见的
*/
}
outline-style
p {
outline-style:dotted;
/*
none:默认,无轮廓
dotted:点状轮廓
dashed:虚线轮廓
solid:实线轮廓
double:双线轮廓,双线的宽度等同于outline-width的值
groove/ridge:定义3D凹/凸槽轮廓,此效果取决于outline-color的值
inset/outset:定义3D凹/凸边轮廓,此效果取决于outline-color的值
*/
}
outline-width
outline-width 属性设置元素整个轮廓的宽度,只有当轮廓样式不是 none 时,这个宽度才会起作用。如果样式为 none,宽度实际上会重置为 0,不允许设置负值。
p.one {
border:red solid thin;
outline-style:solid;
outline-width:thin;
}
p.two {
border:red solid thin;
outline-style:solid;
outline-width:3px;
/*
thin:细轮廓
mediun:默认,中等轮廓
thick:粗轮廓
length:规定轮廓粗细的值
*/
}
<p class="one">This is some text in a paragraph.</p>
<p class="two">This is some text in a paragraph.</p>
boder
简写属性,设置四条边的边框的所有样式,可按照如下顺序 border-width, border-style, border-color。
p {
border: 5px solid red;
}
border-style
可以设置所有边框的样式,或者单独地为各边设置边框样式,可以取一个至四个值,遵循值复制规则。
p {
border-style:dotted;
/*
none:默认,无边框
dotted:点状边框
dashed:虚线边框
solid:实线边框
double:双线边框,双线的宽度等同于border-width的值
groove/ridge:定义3D凹/凸槽边框,此效果取决于border-color的值
inset/outset:定义3D凹/凸边边框,此效果取决于border-color的值
*/
}
p {
border-style:dotted solid double;/*上边框点状,右左边框实线,下边框双线*/
}
border-width
可以设置所有边框的宽度,或者单独地为各边设置边框宽度,可以取一个至四个值,遵循值复制规则。
p {
border-style:solid;
border-width:thin medium thick 10px;
/*
thin, medium, thick, length
*/
}
border-color
可以设置所有边框的颜色,或者单独地为各边设置边框颜色,可以取一个至四个值,遵循值复制规则。
p {
border-style:solid;
border-color:red green gray;
}
border-bottom
border-left
border-right
border-top
单独设置某一条边框的所有样式,可以按照如下顺序:width, style, color 。
p {
border-top:medium dotted red;
border-right:thin solid white;
border-bottom:10px dotted gray;
border-left:5px solid blue;
}
border-bottom-color
border-left-color
border-right-color
border-top-color
单独设置某一条边框的颜色。
p {
border-top-color:red;
border-right-color:blue;
border-bottom-color:yellow;
border-left-color:gray;
}
border-bottom-style
border-left-style
border-right-style
border-top-style
单独设置某一条边框的样式。
p {
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
border-bottom-width
border-left-width
border-right-width
border-top-width
单独设置某一条边框的宽度。
p {
border-top-width:medium;
border-right-width:10px;
border-bottom-width:thin;
border-left-width:5px;
}
CSS内边距与外边距
属性 | 描述 | 属性值 |
---|---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 | |
padding-bottom padding-left padding-right padding-top | 设置元素的下/左/右/上内边距 | auto, length, % |
margin | 简写属性,作用是在一个声明中设置元素的所内边距属性 | |
margin-bottom margin-left margin-right margin-top | 设置元素的下/左/右/上内边距 | auto, length, % |
padding
此属性可以有一到四个值,遵循值复制规则。
p {
padding: 10px 0.25em 2ex 20%;
/*
auto:浏览器计算内边距
length(不允许使用负值)
% (百分数值都是相对于其父元素的 width 计算的)
*/
}
padding-bottom
padding-left
padding-right
padding-top
实现的效果与上面的简写规则是完全相同的,单独对每个边距进行设置。
h1 {
padding-top: 10px;
padding-right: 0.25em;
padding-bottom: 2ex;
padding-left: 20%;
}
margin
此属性可以有一到四个值,与内边距的设置相同,遵循值复制规则。
p {
margin: 10px 0.25em 2ex 20%;
/*
auto:浏览器计算外边距
length(可以使用负值)
% (百分数值是相对于其父元素的 width 计算的)
*/
}
可以用margin进行水平居中
p {
margin:0 auto;
}
margin-bottom
margin-left
margin-right
margin-top
实现的效果与上面的简写规则是完全相同的,单独对每个边距进行设置。
h1 {
margin-top: 10px;
margin-right: 0.25em;
margin-bottom: 2ex;
margin-left: 20%;
}
CSS定位与浮动
属性 | 描述 | 属性值 |
---|---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中 | absolute, fixed, relative, static |
top right bottom left | 定义定位元素的上/右/下/左外边距边界与其包含块左边边界之间的偏移 | auto, length, % |
overflow | 设置当元素的内容溢出其区域时发生的事情 | visible, hidden, scroll, auto |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来 | shape, auto |
vertical-align | 设置元素的垂直对齐方式 | baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, % |
z-index | 设置元素的堆叠顺序 | auto, number |
cursor | 设置鼠标的样式 | auto, crosshair, default, pointer, move, text… |
display | 设置是否以及如何显示元素 | none, block, inline, inline-block, table |
visibility | 设置元素的可见性 | visible, hidden, collapse |
float | 指定不允许元素周围有浮动元素 | left, right, none |
clear | 指定一个盒子(元素)是否可以浮动 | left, right, both, none |
position
属性 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位,元素框从文档流中完全删除 元素的位置通过 left、top、right、bottom 属性进行规定 |
fixed | 生成固定定位的元素,相对于浏览器窗口进行定位,元素框从文档流中完全删除 元素的位置通过 left、top、right、bottom 属性进行规定 |
relative | 生成相对定位的元素,相对于其正常位置进行定位,保留原本所占的空间 元素的位置通过 left、top、right、bottom 属性进行规定 |
static | 默认值。没有定位,元素出现在正常**的流中(忽略 top, bottom, left, right 或者 z-index 声明) |
绝对定位absolute
固定定位fixed
绝对/固定定位元素的位置与文档流无关,因此不占据空间,原来的空间被删除,区别是他们的包含块不一样。
绝对定位的元素的位置相对于最近的已定位祖父元素;
固定定位的元素的位置相对于视口。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
相对定位relative
在使用相对定位时,元素仍然占据原来的空间。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
top
right
bottom
left
img {
position:absolute;
top:5px;
right:-10em;
/*
auto, length, % (允许负值)
*/
}
overflow
div {
width:150px;
height:150px;
overflow:scroll;
/*
visible: 默认值,内容不会被修剪,会呈现在元素框之外
hidden: 内容会被修剪,并且其余内容是不可见的
scroll: 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto: 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
*/
}
clip
img {
position:absolute;
clip:rect(0px,200px,60px,0px);
/*
shape: 设置元素的形状,唯一合法的形状值是:rect (top, right, bottom, left)
auto: 默认值,不应用任何剪裁
*/
}
vertical-align
img {
vertical-align:middle;
/*
baseline: 默认,元素放在父元素的基线上
sub: 垂直对齐文本的下标
super: 垂直对齐文本的上标
top:把元素的顶端与行种最高元素的顶端对齐
text-top: 把元素的顶端与父元素的字体的顶端对齐
middle: 把元素放在父元素的中部
bottom: 把元素的顶端与行中最低的元素的顶端对齐
text-bottom: 把元素的底端与父元素的字体的底端对齐
length, %
*/
}
z-index
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,可以拥有负值。
该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。如果为正数,则离用户更近,为负数则表示离用户更远。
img {
position:absolute;/*只对定位元素奏效*/
left:0px;
top:0px;
z-index:-1;
/*
auto, number
*/
}
cursor
p {
cursor: pointer;
/* 属性值见下图 */
}
display
p {
display: inline;
/*常用:
none:此元素不会被显示
block:显示为块元素,前后会有换行符
inline:显示为内联元素,元素前后没有换行符
inline-block:显示为行内块元素
table:作为块级表格来显示,表格前后有换行符
*/
}
visibility
h2 {
visibility:hidden;
/*
visible: 默认,元素是可见的
hidden: 元素是不可见的
collapse: 当在表格元素中使用时,此值可删除一行或一列,但是不会影响表格的布局,此值用在其他元素上,会呈现 ”hidden“
*/
}
float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
img {
float:right;
/*
left, right, none
*/
}
clear
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面。
img {
float:left;
}
p {
clear:both;
/*
left, right, both:在左/右两侧不允许浮动元素
none: 默认值,允许浮动元素出现在两侧
*/
}
CSS尺寸
属性 | 描述 | 属性值 |
---|---|---|
height width | 设置元素的高度/宽度 | auto ,length, % |
max-height max-width | 设置元素的最大高度/宽度 | length, % |
min-height min-width | 设置元素的最小高度/宽度 | length, % |
CSS选择器
选择器类型 | 例子 | 描述 |
---|---|---|
类选择器 | .important | 选择类class=“important”的所有元素 |
ID选择器 | #intro | 选择id=“intro”的所有元素 |
通配符选择器 | * | 选择所有元素 |
元素选择器 | h1 | 选择所有<h1>元素 |
选择器分组 | div, p | 选择所有<div>和<p>元素 |
后代选择器 | div p | 选择<div>元素内部的所有<p>元素 |
子元素选择器 | div > p | 选择<div>的字元素<p> |
相邻兄弟选择器 | div + p | 选择紧接在<div>元素之后的所有<p>元素 |
属性选择器 | [class] | 选择带有class属性的所有元素 |
[class = “important”] | 选择class = “important” 的所有元素 | |
[class ~= “important”] | 选择 class 属性包含单词 “important” 的所有元素 | |
[class |= “im”] | 选择 class 属性以 “im” 开头的所有元素 | |
伪类 | a:active | 选择被激活(鼠标点击时)链接 |
a:hover | 选择鼠标指针位于其上的链接 | |
a:link | 选择所有未被访问的链接 | |
a:visited | 选择所有已被访问的链接 | |
input:focus | 选择获得焦点的input元素 | |
p:first-child | 选择所有<p>元素,若它是其父元素的首个子元素 | |
p:lang(it) | 选择带有以 “it” 开头的 lang 属性值的每个<p>元素 | |
伪元素 | p:first-letter | 选择每个<p>元素的首字母 |
p:first-line | 选择每个<p>元素的首行 | |
p:before | 在每个<p>元素的内容之前插入内容 | |
p:after | 在每个<p>元素的内容之后插入内容 |
类选择器
.important {color:red;}
p.important {color:red;}
/* 只匹配 class 属性中同时包含词 important 和 urgent 的元素 */
.important.urgent {background:silver;}
ID选择器
#intro {font-weight:bold;}
通配符选择器
该选择器可以与任何元素匹配,就像是一个通配符。
* {color:red;}
元素/类型选择器
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
选择器分组
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
后代选择器
选择所有后代,无论嵌套多深。
/* 只对 h1 元素中的 em 元素应用样式 */
h1 em {color:red;}
子元素选择器
只选择子元素,即第一层嵌套。
h1 > strong {color:red;}
相邻兄弟选择器
选择紧接在该元素后的元素,且二者有相同父元素。
h1 + p {margin-top:50px;}
属性选择器
/* 如果您希望把包含标题(title)的所有元素变为红色 */
*[title] {color:red;}
/* 对有 href 属性的锚(a 元素)应用 */
a[href] {color:red;}
/* 将同时有 href 和 title 属性的 锚(a 元素)设置为红色 */
a[href][title] {color:red;}
/* 根据具体属性值来选择该元素,若写成 p[class="important"] 则无法匹配 */
p[class="important warning"] {color: red;}
<p class="important warning">This paragraph is a very important warning.</p>
/* 部分值匹配,根据部分属性值进行选择 */
p[class~="important"] {color: red;}
/*用于选取带有以指定值开头的属性值的元素,该值必须是整个单词 */
p[class|="important"] {color: red;}
伪类
用于向某些选择器添加特殊的效果。
a:active
a:hover
a:link
a:visited
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
a:link {
color:#FF0000;
text-decoration:none;
}
a:visited {
color:#00FF00;
text-decoration:none;
}
a:hover {
color:#FF00FF;
text-decoration:underline;
}
a:active {
color:#0000FF;
text-decoration:underline;
}
input:focus
选择获得焦点的输入字段,并设置其样式。
input:focus {
background-color:yellow;
}
a:first-child
p:first-child {
background-color:yellow;
}
<body>
<p>这个段落是其父元素(body)的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>
<div>
<p>这个段落是其父元素(div)的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
</div>
a:lang(it)
p:lang(en) {
background:yellow;
}
<p>我是唐老鸭。</p>
<p lang="en">I live in Duckburg.</p>
伪元素
p:first-letter
p:first-letter {
color: #ff0000;
font-size:xx-large
}
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
p:first-line
p:first-line {
color: #ff0000;
font-variant: small-caps
}
<p>
You can use the :first-line pseudo-element to add a special<br>
effect to the first line of a text!
</p>
p:before
h1:before {
content:url(logo.gif);
}
p:after
h1:after {
content:url(logo.gif);
}