CSS从入门到精通之选择器的声明

最新推荐文章于 2022-04-04 09:29:23 发布

weixin_34389926

最新推荐文章于 2022-04-04 09:29:23 发布

阅读量180

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_34389926/article/details/85145050

本文介绍了CSS选择器的不同类型，包括标记选择器、类别选择器和ID选择器，并详细解释了集体声明和全局声明的概念及其应用。通过具体示例帮助读者理解如何使用这些选择器来设置网页样式。

书接上回... < 从分类到结构之CSS选择器>

-------------------------------------------回顾---------------------------------------------------------------------

上一次我们说了两点内容,一起来回顾一下

1 css的分类:

a 外部样式：

（独立存在的后缀为.css的文件。需要在页面内用链接或者导入的方式引入，才能对该页面生效；可作用的范围甚大，甚至另外一台服务器上的CSS文件都可以被当前页连接调用；实现了页面内容和样式在文件上的分离。）

b 内嵌样式

（写在当前页面内的<head></head>标记中的<style></style>标记中，作用的范围只是当前页面。实现了页面内容和样式在标记结构上的分离【样式在head 部分内容在body部分】）

c 行内样式

（写在标记内，用style属性引出，作用范围只针对该标记内容生效。）

以上三种CSS样式写的位置不同，作用范围也不同。而其中外部样式和内嵌样式都很好的体现了样式表的作用：内容和样式的分离。

2 选择器

a 标记选择器(针对某一个标记生效，如例子中针对当前页面内的所有h1标记生效)：

b 类别选择器（在内容标记中用class属性引出，并对该标记的内容生效）

c id选择器（在某个标记的属性中，用id 属性引出，并针对该标记的内容生效）

------------------------------------------回顾完毕--------------------------------------------------------------

说到声明我们来看下面这个图解

那么我们今天关心的就是声明部分:

声明分为两种:

一集体声明

二全局声明(*特殊的集体声明)

一下面我们来看看集体声明的例子:

h1, h2, h3, h4, h5, p{   /* 集体声明 */
color:purple;    /* 文字颜色 */
font-size:15px;    /* 字体大小 */
}
h2.special, .special, #one{  /* 集体声明 */
text-decoration:underline; /* 下划线 */
}

上面就是针对前面的几个选择器进行了依次集体声明.定义他们的文字颜色\字体大小等属性.

所以, 声明就是一种对于选择器进行的动作(概念).

二接着再看全局声明:

*{        /* 全局声明 */
color: purple;    /* 文字颜色 */
font-size:15px;    /* 字体大小 */
}
h2.special, .special, #one{  /* 集体声明 */
text-decoration:underline; /* 下划线 */
}

以上用*号表示全局,针对所有选择器进行声明,但是全局声明的优先级最低,所以一旦定义的属性冲突,那么全局声明就退位让闲了.

好了今天就说这么两个例子.

关于CSS选择器的嵌套,继承等关系...我们下回分解.....