请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5与CSS3基础完全自学教程(五)

[复制链接]
发表于 2020-6-28 18:30:08 | 显示全部楼层 |阅读模式

本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注,第一时间看文章!

导读:本小节主要讲解 CSS 选择器的概念,以及 CSS 选择器的分类。CSS 选择器是 CSS 中最重要的组成部分之一,所以通过本小节的学习,可以为后续学习 CSS 打下坚实的基础。


CSS 选择器的作用是按照 CSS 规则定位 HTML 页面的一个或多个元素。浏览器在解析 HTML 页面时,会根据 CSS 规则中的选择器定位 HTML 页面的元素,并为对应的元素设定样式。

通过 CSS 选择器可以实现对 HTML 元素的一对一、一对多和多对一的定位。如下列表所示:

  • 如下示例代码所示展示了 CSS 选择器一对一定位 HTML 元素:

1#box {
2  color: lightcoral;
3  font-size24px;
4}
  • 如下示例代码所示展示了 CSS 选择器一对多定位 HTML 元素:

1div {
2  color: lightcoral;
3  font-size24px;
4}
  • 如下示例代码所示展示了 CSS 选择器多对一定位 HTML 元素:

1div.demo {
2  color: lightcoral;
3  font-size24px;
4}

说明:上述 CSS 具体用法会在后续章节中进行详细讲解。


CSS 从第一版本发展到第三版本,导致 CSS 选择器的种类越来越复杂。目前,CSS 选择器的分类具体如下:

  • 基本选择器:共有 5 个基本选择器,是 CSS 选择器的最为基本的用法。

  • 层级选择器:共有 4 个层级选择器,是根据 HTML 元素之间的关系来定位 HTML 元素。

  • 组合选择器:具有交集和并集两种用法,是将之前基本选择器和层级选择器进行组合。

  • 伪类选择器:允许未包含在 HTML 页面中的状态信息选定位 HTML 元素。

  • 伪元素选择器:定位所有未被包含 HTML 的实体。

提示:CSS 选择器的分类以及命名方式,不同资料中可能会有不同,但选择器的每一种用法是一致的。


本小节讲解了 CSS 的概念以及种类,这些内容虽然不会在开发中直接使用,但是后续学习 CSS 中的基础内容。

预告:下一节,我们将讲解 CSS 选择器中的基本选择器的用法。

如要转载本文,请先加作者微信(2080954535,与 QQ 同号),获得转载许可。原创不易,请尊重作者劳动!

作者二维码.png


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-11 04:05 , Processed in 0.414825 second(s), 36 queries .

快速回复 返回顶部 返回列表