Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器
目录
- 前言
- 一、CSS选择器
- （一）标签选择器
- （二）id选择器
- （三）类别选择器
- 二、针对标签的选择器嵌套
- 三、集体声明和全局声明
- （一）集体声明
- （二）全局声明
- 结语
前言
CSS代码由
选择器和一条或多条声明组成的，选择器是需要改变样式的 HTML标签，在CSS中由分号隔开每条代码为声明，且声明是以大括号{}括起来的。
之前我们阐述了CSS的基本概念，其中选择器是需要改变样式的 HTML标签，然而选择器分为三种：标签选择器、id选择器、class选择器，它们的作用都是设置CSS样式。
一、CSS选择器
（一）标签选择器
标签选择器对HTML中的标签设计样式。
例如，下列html代码中，设置h2标签样式字号为25像素且为红色，p标签样式字号为15像素且为蓝色：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">h2 {color: red;font-size: 25px;}p {color: blue;font-size: 15px;}</style></head><body><h2>CSS</h2><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>运行结果如下：
（二）id选择器
id选择器，可以通过在CSS 使用"#“对特定 id 的 HTML标签设计特定的样式 ，即可对html中多个标签进行不同的CSS样式设置。若不使用”#"，则表示作用于当前html代码中所有该类型标签进行样式设置。
要注意多个id选择器不能同时使用，即id标签只能被引用一次。
例如，下列html代码中，id=style1的文本样式设置为红色、字号为15像素；id=style2的文本样式设置为蓝色、字号为15像素：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#style1 {color: red;font-size: 15px;}#style2 {color: blue;font-size: 15px;}</style></head><body><p id="style1">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p id="style2">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></body></html>运行结果如下：
（三）类别选择器
类别选择器（class选择器），即用于对一组标签的样式设计，它可作用于多个标签且多次使用，通过设置html中标签的class属性，然后在CSS中使用“.”进行引用。
也可以在html标签中使用多个选择器名称，之间用空格隔开，从而对某个或多个标签设计多个样式。
例如，下列html代码中，对class="other red "的h2标签文字进行居中对齐、设置为红色，对class="red"的p标签样式设置为红色、字号为10像素，对class="blue"的p标签样式设置为蓝色、字号为15像素：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">h2.other {text-align: center;}.red {color: red;font-size: 10px;}.blue {color: blue;font-size: 15px;}</style></head><body><h2>以下是CSS的介绍：</h2><h2 class="other red">CSS</h2><p class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p class="blue">CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p><p class="blue">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p></body></html>运行结果如下：
id标签也可以和class标签混合使用，例如下列html代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.red {color: red;font-size: 20px;}#style {color: blue;font-size: 20px;}</style></head><body><h2>以下是CSS的介绍：</h2><h2 class="red">CSS</h2><p id="red" class="red">层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>二、针对标签的选择器嵌套
当要对html标签中嵌套的标签进行样式设计时，在CSS代码中通过标签 嵌套的标签{ }两个选择器来表示，标签和嵌套的标签中用空格隔开。
例如，下列html代码中，对文本中的“HTML”进行样式设计：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">p span {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>运行结果如下：
三、集体声明和全局声明
（一）集体声明
在CSS代码中通过","对多个选择器间隔，即可对多个html标签进行集体声明。
例如，下列html代码中，对html中的h2标签和p标签进行统一的样式设计：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">h2,p {color: red;font-size: 18px;}</style></head><body><h2>CSS</h2><p><span>层叠样式表</span>是一种用来表现HTML或XML等文件样式的计算机语言。</p></body></html>运行结果如下：
（二）全局声明
在CSS代码中通过"*"对所有html标签进行统一的样式设计，即为全局声明。
例如，下列html代码中，对html中的所有标签进行统一的样式设计：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">* {color: orangered;font-size: 18px;}</style></head><body><h2>CSS</h2><p>层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。</p><p>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</p></body></html>运行结果如下：
结语
以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！
Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器相关推荐
- Web前端开发笔记——第四章 JavaScript程序设计 第二节 变量
目录 一.JavaScript中的注释 二.变量的命名规则 三.变量声明以及赋值 四.变量作用域 五.变量提升 一.JavaScript中的注释 JavaScript中单行注释通过"//&q ...
- Web前端开发笔记——第三章 CSS语言 第六节 CSS定位
目录 一.定义 二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素 三.浮动定位 (一)左浮动和右浮动 (二)清除浮动 四.层定位 (一)st ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- Web前端开发笔记——第四章 JavaScript程序设计 第一节 JavaScript的基础语法
目录 一.JavaScript的定义 二.代码的创建和使用 (一)内嵌JavaScript代码 (二)引用JavaScript文件 三.代码的注释 四.输出数据 (一)alert()弹出警告框 (二) ...
- Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影
目录 前言 一.圆角边框 (一)border-×-×-radius (二)border-radius 二.阴影 (一)基本阴影设置 (二)内部阴影设置 结语 前言 本节介绍仅在CSS3中的新内容,例如 ...
- Web前端开发笔记——第三章 CSS语言 第八节 CSS3文本文字设置
目录 前言 一.文本阴影 二.强制换行 三.字体设置 结语 前言 本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影 通过定义text-shadow来对文本进行阴影设置 ...
- Web前端开发笔记——第三章 CSS语言 第五节 盒子模型
目录 一.CSS布局与定位 二.盒子模型 三.盒子模型的组成 四.设置边框的属性 五.设置外.内边距的属性 六.overflow 属性 结语 一.CSS布局与定位 在CSS中对一个网页进行布局与定位, ...
- Web前端开发笔记——第三章 CSS语言 第一节 CSS的基本概念和样式表
目录 一.CSS和HTML 二.CSS的基本语法格式 三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件 四.多重样式优先级 结语 一.CSS和HTML CSS,又称为层叠样 ...
- Web前端开发笔记——第三章 CSS语言 第三节 文本、字体、背景、超链接样式属性
目录 一.CSS文本属性 二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性 三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
最新文章
- SVN版本管理系统的安装 CentOS + Subversion + Apache + Jsvnadmin
- GMS(cts、gsi、vts、gts、ctsv)问题总结
- linux循环判断输出结果,Linux Shell基础学习——循环与条件判断
- Java中动态获取项目根目录和tomcat的绝对路径
- ABAP和Java里的单例模式攻击
- 51nod 1343 行列式的根
- [XSY] 简单的博弈题（博弈+dp+组合数+容斥）
- fusion构建器代码语法_构建器模式：适用于代码，适用于测试
- Android应用开发——onStop的调用时机
- python2/3 模块gmpy2在linux下安装
- 促销惊喜活动优惠海报设计，可临摹PSD分层格式
- Disabling Shortcut Keys in Full Screen mode
- python 笔记：h5py
- 使用Spider提取数据（爬取起点中文网）
- [OpenBMC] 快速上手OpenBMC的Redfish
- SpringBoot整合JavaMail---发送邮件
- 网络安全新晋网红“零信任”
- 数据分析AB测试实战项目
- 【AI视野·今日CV 计算机视觉论文速览 第174期】Tue, 7 Jan 2020
- 贪心算法经典例题3：导弹发射问题