天涯论坛

 找回密码
 立即注册
搜索
查看: 79|回复: 0

HTML+CSS 基本知识-入门概括-选取器

[复制链接]

3048

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109040
发表于 2024-6-29 13:52:21 | 显示全部楼层 |阅读模式

1、选取器概述

1、什么是选取

CSS 选取器的功效根据 CSS 规则定位 HTML 页面的一个或多个元素浏览器在解析 HTML 页面时按照 CSS 规则中的选取器定位 HTML 页面的元素并为对应的元素设定样式 说白了便是对元素做标记方便按照标记去决定给那几个元素添加css样式 经过 CSS 选取能够实现对 HTML 元素的一对一一对多和多对一的定位 如下示例代码所示展示了 CSS 选取器一对必定 HTML 元素 #box { color: lightcoral; font-size: 24px; } 如下示例代码所示展示了 CSS 选取器一对多定位 HTML 元素 div { color: lightcoral; font-size: 24px; } 如下示例代码所示展示了 CSS 选取器多对必定 HTML 元素 div.demo { color: lightcoral; font-size: 24px; }

2、选取器的归类

CSS 从第1版本发展到第三版本,引起 CSS 选取器的种类越来越繁杂日前,CSS 选取器的归类详细如下: ​ 基本选取器:共有 5 个基本选取器,是 CSS 选取器的最为基本的用法。 层级选取器:共有 4 个层级选取器,是按照 HTML 元素之间的关系来定位 HTML 元素。 组合选取器:拥有交集和并集两种用法,是将之前基本选取器和层级选取器进行组合。 伪类选取器:准许包括在 HTML 页面中的状态信息选定位 HTML 元素。 伪元素选取器:定位所有未被包括 HTML 的实体。 ​ 提示:CSS 选取器的归类以及命名方式,区别资料中可能会有区别,但选取器的每一种用法是一致的。

2、基本选择器

1、概述

CSS 的基本选取器是选取器所有种类中最为基本的用法,基本选取器共有 5 种详细用法,如下: ​ 类型(Type)选取器(有些中文资料中叫作为“元素选取器”) ​ 类(Class)选取器 ​ ID 选取器 ​ 通用选取器(有些中文资料中叫作为“通配符选取器”) ​ 属性选取

2.1、类型选取

类型选取叫作为元素选取这种基本选取器是经过 HTML 页面的元素名定位详细 HTML 元素倘若类型选取器单独运用的话会定位当前 HTML 页面中所有该元素名的元素。(经过元素名定位元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类型选取</title> <style> div { color: lightcoral; font-size: 24px; } </style> </head> <body> <div>这是测试内容.</div> <p>这是另一个测试内容.</p> </body> </html>

2.2、类选取

选取器是经过 HTML 元素的 class 属性的值定位详细 HTML 元素这种基本选取器的用法是 .className 形式其中 className 叫作为类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选取</title> <style> .demo { color: lightcoral; font-size: 24px; } </style> </head> <body> <div class="demo">这是测试内容.</div> <p>这是另一个测试内容.</p> </body> </html>

2.3、ID 选取

ID 选取器是经过 HTML 元素的 id 属性的值定位详细 HTML 元素这种基本选取器的用法是 #ID 形式其中 ID id 属性的值 #ID { 属性 : 属性值; } 如下示例代码展示了ID 选取器的用法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ID选取</title> <style> #Demo { color: lightcoral; font-size: 24px; } </s




上一篇:HTML+CSS实现基本网页布局(一)
下一篇:纯用HTML+css做导航条
回复

使用道具 举报

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

本版积分规则

站点统计|Archiver|手机版|小黑屋|天涯论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-23 10:04 , Processed in 1.765207 second(s), 39 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.