【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式

我是波哩个波

已于 2022-03-10 15:07:41 修改

阅读量773

点赞数 1

分类专栏： # CSS3从入门到精通文章标签：前端 html html5 css3 css

于 2021-11-24 13:42:20 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/121513157

版权

CSS3从入门到精通专栏收录该内容

9 篇文章 3 订阅

订阅专栏

一、CSS基础选择器

选择器表示结构。该结构可以用作条件（例如，在CSS规则中），其确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的HTML或XML片段的平面描述。

CSS的选择器分为两大类：基本选择器和扩展选择器。

基本选择器：

标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议单独使用）

1.1 标签选择器

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

<style type="text/css">
p{
    font-size:14px;
}
</style>

需要注意的是：

（1）所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。

（2）无论这个标签藏的多深，一定能够被选择上。

（3）选择的所有，而不是一个。

1.2 ID选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="mytitle":

<head>
    <title>Document</title>
    <style type="text/css">
    #mytitle{
        border:3px dashed green;
    }
</style>
</head>
<body>
    <h2 id="mytitle">你好</h2>
</body>

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字，可以任取，但是：

（1）只能有字母、数字、下划线。

（2）必须以字母开头。

（3）不能和标签同名。比如id不能叫做body、img、a。

（4）大小写严格区分，也就是说aa,和AA是两个不同的ID

另外，特别强调的是：HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

1.3 类选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

举例如下：

<style type="text/css">
    .oneclass{/*定义类选择器*/
        width:800px;
    }
</style>
</head>
<body>
    <h2 class="oneclass">你好</h2>
</body>

和id非常相似，任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点：

特性1：类选择器可以被多种标签使用。

特性2：同一个标签可以使用多个类选择器。用空格隔开。举例如下

<h3 class="classone  classtwo">我是一个h3啊</h3>

而不能写成：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

类选择器使用的举例：

类选择器的使用，能够决定一个人的css水平。

应该注意：

（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。

（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。

如：

<style type="text/css">
.lv{
    color: green;
}
.da{
    font-size: 30px;
}
.underline{
    text-decoration: underline;
}
</style>

然后让每个标签去选取自己想要用的类选择器：

<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>

问题：到底用id还是用class？

答案：尽可能的用class，除非极特殊的情况可以用id。

原因：id是js用的。也就是说，js要通过id属性得到标签，所以css层面尽量不用id，要不然js就很别扭。另一层面，我们会认为一个有id的元素，有动态效果。

我们记住这句话：类上样式，id上行为。意思是说，class属性交给css使用，id属性交给js使用。

上面这三种选择器的区别：

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个)，ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

1.4 通配符

通用选择器，将匹配任何标签。不建议使用，IE有些版本不支持，大网站增加客户端负担。

效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。

基础选择器:

标签选择器: 1、CSS Reset的时候使用 2、结合其他层级选择器使用

id选择器: 尽可能不要使用,除非极特殊的情况

类选择器: 推荐使用,但是如果可以通过其他选择器替代,也少用

通配符选择器: 不要单独使用,可以偶尔集合其他选择器来使用

二、基础常用样式属性

2.1 CSS颜色表示方式

关于颜色的小知识:

颜色是通过对红、绿和蓝光的组合来显示的。早期的电脑只支持最多 256 种颜色时，但是现在大多数电脑都能显示数百万种颜色。

1、英文颜色名称

目前所有浏览器都支持以下颜色名。141个颜色名称是在HTML和CSS颜色规范定义的（17标准颜色，再加124）。提示: 17标准颜色：黑色，蓝色，水，紫红色，灰色，绿色，石灰，栗色，海军，橄榄，橙，紫，红，白，银，蓝绿色，黄色。

优点：方便快捷而且特定颜色比较准确

缺点：表示颜色数量有限，不支持透明度的表示

2、十六进制方式

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

优点：表示颜色种类多，使用较方便

缺点：不支持透明颜色。

3、RGB方式:三原色配色方式

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。三种颜色红，绿，蓝的组合从0到255，一共有1600万种不同颜色(256 x 256 x 256)。

优点：表示颜色种类多，使用较方便

缺点：不支持透明颜色。

每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。

2.2 CSS 背景样式

CSS 背景属性用于定义HTML元素的背景(背景颜色/背景图片)。

属性	描述
background	简写(复合)属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。 scroll:默认值。 fixed:当页面的其余部分滚动时，背景图像不会移动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。值: url(“图片路径”)；默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
background-position	设置背景图像的起始位置。 left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。 x% y%:第一个值是水平位置，第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值，另一个值将是 50%。 x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。
background-repeat	设置背景图像是否及如何重复,默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 repeat (平铺，默认) repeat-x (x轴平铺) repeat-y (y轴平铺) no-repeat (不平铺)

当使用简写属性时，属性值的顺序为：:

background-color

background-image

background-repeat

background-attachment

background-position

以上属性无需全部使用，你可以按照页面的实际需要使用.

body {
    background:#ffffff url('img_tree.png') no-repeat right top;
}

2.3 CSS文本格式样式

属性	描述
color	设置文字的颜色。
direction	设置文本方向。 ltr:默认。文本方向从左到右。 rtl:文本方向从右到左。 inherit:规定应该从父元素继承 direction 属性的值。
unicode-bidi	设置或返回文本是否被重写 bidi-override:创建一个附加的嵌入层面。重新排序取决于 direction 属性。
letter-spacing	设置字符间距。 normal:默认，规定字符间没有额外的空间。 length:定义字符间的固定空间（允许使用负值）。
line-height	设置行高。 normal:默认，设置合理的行间距。 number:设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 length:设置固定的行间距。%:基于当前字体尺寸的百分比行间距。
text-align	设置文本的水平对齐方式。 left:把文本排列到左边。默认值：由浏览器决定。 right:把文本排列到右边。 center:把文本排列到中间。 justify:实现两端对齐文本效果。
text-decoration	设置或删除文本的装饰。 none:默认,定义标准的文本。 underline:定义文本下的一条线。 overline:定义文本上的一条线。 line-through:定义穿过文本下的一条线。 blink:定义闪烁的文本(无效)。我们不建议强调指出不是链接的文本，因为这常常混淆用户。
text-indent	用来指定文本的第一行的缩进。 length:定义固定的缩进。默认值：0。 %:定义基于父元素宽度的百分比的缩进。
text-shadow	设置文本阴影。 h-shadow:必需。水平阴影的位置。允许负值。 v-shadow:必需。垂直阴影的位置。允许负值。 blur：可选。模糊的距离(使用像素,像素值越大,越模糊)。 color：可选。阴影的颜色。
text-transform	设置在一个文本中的大写和小写字母。 none：默认，定义带有小写字母和大写字母的标准的文本。 capitalize：文本中的每个单词以大写字母开头。 uppercase：定义仅有大写字母。 lowercase：定义无大写字母，仅有小写字母。
vertical-align	设置元素的垂直对齐。此处需要特别注意的是：垂直对齐属性只对行内元素有效 baseline：默认。元素放置在父元素的基线上。 baseline是什么？这是维基百科上的一张图,简单地来说，baseline是小写字母x下面的一条线。 top：把元素的顶端与行中最高元素的顶端对齐。 text-top：把元素的顶端与父元素字体的顶端对齐。 middle：把此元素放置在父元素的中部。 bottom：把元素的底端与行中最低的元素的顶端对齐。 text-bottom：把元素的底端与父元素字体的底端对齐。
white-space	设置元素中空白的处理方式。默认。空白会被浏览器忽略。 pre：空白会被浏览器保留。其行为方式类似 HTML 中的 `<pre>` 标签。 nowrap:文本不会换行，文本会在在同一行上继续，直到遇到 `<br>` 标签为止。 pre-wrap:保留空白符序列，但是正常地进行换行。 pre-line:合并空白符序列，但是保留换行符。
word-spacing	设置单词间距. normal:默认。定义单词间的标准空间。 length:定义单词间的固定空间。

2.4 CSS字体样式

CSS字体属性定义字体，加粗，大小，文字样式。

在CSS中，有两种类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

Generic family	字体系列	说明
Serif	Times/New Roman/Georgia	Serif字体中字符在行的末端拥有额外的装饰
Sans-serif	Arial Verdana	"Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace	Courier New Lucida Console	所有的等宽字符具有相同的宽度

字体样式属性：

Property	描述
font	在一个声明中设置所有的字体属性。可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family" font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。注意： line - height属性设置行与行之间的空间。注:多个设置必须包含大小和字体系列,大小和字体系列顺序不能变,其他三个顺序无所谓！
font-family	设置文本的字体系列。 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。例如:font-family:"Times New Roman",Georgia,Serif;使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。注意：每个值用逗号分开。关于电脑已有文字支持:1.新建一个WORD文档,在word文档上面有一个字体选项,点开下拉三角所有的字体都可以显示出来.2.点击进入控制面板.在控制面板中找到字体选项,点击进入字体选项.打开字体选项,电脑里所有的字体都在这里
font-size	设置文本的大小。能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。 xx-small、x-small、small、medium、large、x-large、xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。 smaller：把 font-size 设置为比父元素更小的尺寸。 larger：把 font-size 设置为比父元素更大的尺寸。 length:把 font-size 设置为一个固定的值。 %：把 font-size 设置为基于父元素的一个百分比值。
font-style	用于指定斜体文字的字体样式属性。 normal:默认值。浏览器显示一个标准的字体样式。 italic:浏览器会显示一个斜体的字体样式。 oblique:倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
font-variant	设置定义小型大写字母文本。 normal:默认值。浏览器会显示一个标准的字体。 small-caps:浏览器会显示小型大写字母的字体。
font-weight	指定字体的粗细。 normal:默认值。定义标准的字符。 bold:定义粗体字符。 bolder:定义更粗的字符。 lighter:定义更细的字符。 100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

2.5 CSS 列表

CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中可以按顺序设置如下属性： list-style-type / list-style-position / list-style-image可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
list-style-image	将图像设置为列表项标志。 URL:图像的路径。 none:默认。无图形被显示。
list-style-position	设置列表中列表项标志的位置。 inside:列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-type	设置列表项标志的类型。 none:无标记。 disc:默认。标记是实心圆。 circle:标记是空心圆。 square:标记是实心方块。 decimal:标记是数字。 decimal-leading-zero:0开头的数字标记。(01, 02, 03, 等。) lower-roman:小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman:大写罗马数字(I, II, III, IV, V, 等。) lower-alpha:小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha:大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek:小写希腊字母(alpha, beta, gamma, 等。) lower-latin:小写拉丁字母(a, b, c, d, e, 等。) upper-latin:大写拉丁字母(A, B, C, D, E, 等。) hebrew:传统的希伯来编号方式. armenian:传统的亚美尼亚编号方式. georgian:传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic:简单的表意数字。 hiragana：标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符） katakana：标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符） hiragana-iroha：标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号） katakana-iroha：标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）

2.6 CSS表格

使用 CSS 可以使 HTML 表格更美观。

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td{
    border: 1px solid black;
}

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

属性	描述
width	设置表格宽度。table/tr/td/th/thead/tfoot/tbody共有样式属性
height	设置表格高度table/tr/td/th/thead/tfoot/tbody共有样式属性注:我们一般仅仅只是给table设置总宽度即可;给tr设置高度
border	设置表格边框。table/td/th共有样式属性
border-collapse	设置是否把表格边框合并为单一的边框（table独有）。 collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
border-spacing	设置表格的边框间距。（table独有） length：规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。
caption-side	指定表格标题的位置。（table独有） top：默认值。把表格标题定位在表格之上。 bottom：把表格标题定位在表格之下。
empty-cells	隐藏表中的空单元格的边框和背景。（table独有） hide：不在空单元格周围绘制边框。 show：在空单元格周围绘制边框。默认。
table-layout	设置表格的布局算法。（table独有） automatic：默认。列宽度由单元格内容设定。 fixed：列宽由表格宽度和列宽度设定。

练习:

2.7 盒子模型

盒模型概述

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容（从内到外: 内容区域,内边距,边框,外边距）。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距)：清除边框外的区域，外边距是透明的。
Border(边框)：围绕在内边距和内容外的边框。
Padding(内边距)：清除内容周围的区域，内边距是透明的。
Content(内容区域)：盒子的内容，显示文本和图像。

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和边距。

盒模型相关样式

外边距的合并:

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例如:当两个div,一个设置了距离底部50px,一个设置距离顶部30px，他俩之间的距离就是50px，而不是两者相加.

IE盒模型和W3C盒模型

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

从上图可以看出，w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。

从上图可以看出，IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.

总结:

IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题。

只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作。

另外，我们现在应该能理解了，css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

2.8 CSS边框

CSS边框属性允许你指定一个元素边框的样式和颜色。

边框相关样式属性：

注: 边框只需要记border或border-left/right/bottom/top即可;

2.9 CSS 轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

属性	描述
outline	在一个声明中设置所有的轮廓属性
outline-color	设置轮廓的颜色
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度

在CSS3.0中,可以通过outline-offset来实现轮廓的外偏移(不能写在复合属性里面);

2.10 CSS 尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS计数器

CSS 计数器通过一个变量来设置，根据规则递增变量。

CSS 计数器根据规则来递增变量。

CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建：

以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2>元素的计数值都会递增，并在每个 <h2> 元素前添加 "Section <计数值>:"

body {
  counter-reset: section;
}
 
h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

嵌套计数器

以下实例在页面创建一个计数器，在每一个<h1>元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在<h2> 元素的前面，内容为 "<主标题计数值>.<副标题计数值>":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计数器实例</title>
<style>
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>


<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>

<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>

</body>
</html>

计数器也可用于列表中，列表的子元素会自动创建。这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表计数器</title>
<style>
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}
</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>
</ol>

<ol>
  <li>item</li>
  <li>item</li>
</ol>

<p><b>注意:</b> IE8 需要指定 !DOCTYPE 才可以支持该属性。</p>

</body>
</html>

我是波哩个波

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端系列教程之CSS3】02_CSS基础选择器和基础常用样式

一、CSS基础选择器选择器表示结构。该结构可以用作条件（例如，在CSS规则中），其确定选择器在文档树中匹配哪些元素，或者作为对应于该结构的HTML或XML片段的平面描述。CSS的选择器分为两大类：基本选择器和扩展选择器。基本选择器：标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用类选择器：针对你想要的所有标签使用通用选择器（通配符）：针对所有的标签都适用（不建议单独使用）标签选择器...
复制链接

扫一扫