01 css规范及选择器规则

最新推荐文章于 2022-05-02 14:39:29 发布

原创最新推荐文章于 2022-05-02 14:39:29 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css规则 #css书写规范 #css选择器 #复合选择器

CSS 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS的样式规则、书写规范和选择器的使用，包括空格、选择器和属性的规范，以及基础选择器如标签、类、ID和复合选择器的使用方法。此外，还探讨了通配符和伪类选择器在CSS中的应用，帮助开发者更好地理解和运用CSS。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. css简介

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

2. css样式规则

css样式规则如下图：

在上面的样式规则中:

选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“:”连接。
多个“键值对”之间用英文“;”进行区分。

3. css书写规范

空格规范

选择器与 { 之间必须包含空格。示例： .selector { }
属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。示例：font-size: 12px;

选择器规范

当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

建议：选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

属性规范

属性定义必须另起一行。

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

属性定义后必须以分号结尾。

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

4. css选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

基础选择器组

①标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器。按标签名称，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名 {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3; 
}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

②类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名。其基本语法格式如下：

.classname {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;
}

标签调用的时候用 class=“类名” 即可。类选择器最大的优势是可以为元素对象定义单独或相同的样式。

注意：

长名称或词组可以使用中横线来为选择器命名。
不建议使用“_”下划线来命名CSS选择器。
不要纯数字、中文等命名，尽量使用英文字母来表示。

③多类名选择器

可以给标签指定多个类名，从而达到给标签定义多个样式的效果。多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
各个类名中间用空格隔开。

④id选择器

id选择器使用“#”进行标识，后面紧跟id名。其基本语法格式如下：

#id名 {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;
}

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本和类选择器相同。

注意：id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

id选择器和类选择器最大的不同在于使用次数上。

⑤通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {
    属性1:属性值1; 
    属性2:属性值2; 
    属性3:属性值3;
}

通配符选择器用来清除默认边距：

* {
    margin: 0;
    padding: 0;
}

⑥伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

a {   /* a是标签选择器  所有的a链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过样式 */
			color: red; /*  鼠标经过的时候，由原来的灰色变成了红色 */
}

记忆方法：love hate

结构(位置)伪类选择器

:first-child :选取属于其父元素的首个子元素
:last-child :选取属于其父元素的最后一个子元素
:nth-child(n) ：匹配属于其父元素的第 N 个子元素，不论元素的类型(odd奇数、even偶数、2n-1等)
:nth-last-child(n) ：匹配属于其父元素的倒数第N个子元素，n可以是数字、关键词或公式(n， 2n， 2n-1)。

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
}

目标伪类选择器

:target目标伪类选择器：选择器可用于选取当前活动的目标元素

:target {
		color: red;
		font-size: 30px;
}

复合选择器组

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

①交集选择器(.)

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格。

h3.special {
    color: red;
}

表示选择class属性为special的h3元素。

记忆技巧：交集即既又的意思

②并集选择器(,)

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

.one, 
p,
#test {
    color: #fff;
}

上面表示为class属性为one的标签、p标签、id属性为test的标签定义相同的颜色属性。

③后代选择器( )

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

.test a {
    color: red;
}

表选择class属性为test的元素的所有a子孙元素。

注意：后代选择器可以选择子孙元素。

④子元素选择器(>)

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

注意：符号左右两侧各保留一个空格(只能选择直接的子元素–亲儿子)。

.test > a {
    color: red;
}

表选择class属性为test的元素的所有a子元素。

⑤属性选择器[]

选取标签带有某些特殊属性的选择器，城为属性选择器。

使用方式	含义
E[attr]	具有属性为val的某个元素
E[attr=val]	属性为val的某个元素
E[attr*=val]	属性值包含val的某个元素
E[attr^=val]	属性值起始位值为val的某个元素
E[attr$=val]	属性值结束位置为val的某个元素

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
}

⑥伪元素选择器::

E::first-letter 文本的第一个单词或字（如中文、日文、韩文等）；
E::first-line 文本第一行；
E::selection 可改变选中文本的样式；
E::before和E::after 在E元素内部的开始位置和结束位置插入一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素。CSS3的规范里–“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

注意：":" 与 “::” 区别在于区分伪类和伪元素。