CSS 基础教程:CSS 选择器
CSS 选择器
CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类:
- 简单选择器(根据名称、id、类来选取元素)
- 组合器选择器(根据它们之间的特定关系来选取元素)
- 伪类选择器(根据特定状态选取元素)
- 伪元素选择器(选取元素的一部分并设置其样式)
- 属性选择器(根据属性或属性值来选取元素)
此页会讲解最基本的 CSS 选择器。
CSS 元素选择器
元素选择器根据元素名称来选择 HTML 元素。
实例
在这里,页面上的所有
元素都将居中对齐,并带有红色文本颜色:
p {text-align: center;color: red;
}
CSS id 选择器
- id 选择器使用 HTML 元素的 id 属性来选择特定元素。
- 元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素!
- 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。
实例
这条 CSS 规则将应用于 id=“para1” 的 HTML 元素:
#para1 {text-align: center;color: red;
}
注意:id 名称不能以数字开头。
CSS 类选择器
- 类选择器选择有特定 class 属性的 HTML 元素。
- 如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
实例
在此例中,所有带有 class=“center” 的 HTML 元素将为红色且居中对齐:
.center {text-align: center;color: red;
}
您还可以指定只有特定的 HTML 元素会受类的影响。
实例
在这个例子中,只有具有 class=“center” 的
元素会居中对齐:
p.center {text-align: center;color: red;
}
HTML 元素也可以引用多个类。
实例
在这个例子中,
元素将根据 class=“center” 和 class=“large” 进行样式设置:
<p class="center large">这个段落引用两个类。</p>
注意:类名不能以数字开头!
所有简单的 CSS 选择器
CSS 分组选择器
分组选择器选取所有具有相同样式定义的 HTML 元素。
请看下面的 CSS 代码(h1、h2 和 p 元素具有相同的样式定义):
h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}
- 最好对选择器进行分组,以最大程度地缩减代码。
- 如需对选择器进行分组,请用逗号来分隔每个选择器。
CSS 基础教程:CSS 选择器相关推荐
- CSS基础教程(下)
今天把看<CSS基础教程>的下半部分笔记贴出来,嘿嘿,希望也对大家有点好处. 一. 文本 1. 基本字体属性 下面看看字体的几个属性: 1)font-f ...
- css基础教程【学习笔记】
[前端总路线学习笔记] 文章目录 css基础 一. css初识 二. css语法规范 三. 字体属性 四. CSS注释 五.开发工具 六. 选择器 七.文本属性 八.css样式表: 1.内部样式表(嵌 ...
- DIV+CSS基础教程
DIV+CSS基础教程 第一节 了解DIV+CSS 一.什么是DIV+CSS DIV元素是html(超文本语言)中的一个元素,是标签,用来为HTML文档内大块(block-level)的内容提供结构 ...
- CSS基础(复合选择器-三大特性)
CSS基础(复合选择器-三大特性) Emmet语法 快速生成HTML 如果想快速生成多个标签,直接*n. div*3
- css做名单,css基础教程:2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
- W3school:CSS基础:CSS边框、CSS边距、CSS高度/宽度、CSS框模型、CSS轮廓
W3school:CSS基础:CSS边框.CSS边距.CSS高度/宽度.CSS框模型.CSS轮廓 1.CSS边框(边框.边框宽度.边框颜色.边框各边.简写边框属性.圆角边框) 2.CSS边距(外边距. ...
- W3school:CSS基础:CSS注释、颜色(颜色、RGB、HEX、HSL)、背景(背景、背景图像、背景重复、背景附着、简写背景属性)
W3school:CSS基础:CSS注释.颜色(颜色.RGB.HEX.HSL).背景(背景.背景图像.背景重复.背景附着.简写背景属性) 一.CSS注释 1.注释用于解释代码,以后在您编辑源代码时可能 ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- CSS基础(part2)--CSS选择器
学习笔记,仅供参考,有错必纠 文章目录 CSS CSS语法 CSS简单属性 CSS注释 CSS选择器 通配符选择器 ID选择器 类选择器 CSS复合选择器 标签指定式选择器(既...又...) 后代选 ...
- 《CSS基础教程》 读书笔记二
1.设定border-width属性值之前需要先声明border-style属性. 2.line-height:调整文本行与行之间的间距,务必使用,在border选择器中设置,150%或160%可能更 ...
最新文章
- linux:Ubuntu入门基础
- WordPress页面Page和文章Post的相互转换
- PO Create PO时关于汇率问题需要注意的步骤
- java:区间k大数查询
- python中的 descriptor
- 浏览器上请求URL的全部过程
- c语言jam的随机数,c – 如何重置随机数引擎?
- TreeMap按照key排序
- 在.NET/Mono上运行Java:Jeroens Frijters谈IKVM.NET
- 181002有道扇贝每日一句
- 【人脸识别】基于matlab GUI PCA人脸二维码识别(带面板)【含Matlab源码 754期】
- 用两个栈实现一个队列
- 移动端H5 QQ在线客服链接代码
- jsp登陆界面链接mysql_用jsp实现网站登录界面的制作,并连接数据库
- 2022年山东省安全员C证考试资料及山东省安全员C证考试试题
- springboot项目制作漂亮的banner
- MODBUS RTU 协议读卡器
- html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
- 10个免费音效素材下载网站,下载超方便还能免费商用!
- 有效解决package ‘xxxx‘ is not in GOROOT
热门文章
- 东南计算机专硕和学硕,问了200个学长学姐,终于知道专硕学硕的“差别”
- 第六章 选择语句、循环语句、Debug
- 融新聚力,筑梦畅行|云畅科技“融云计划”第一期集训营圆满结营
- errMsg: “checkJsApi:ok“
- 2017年下半年网络工程师真题+答案解析
- 解决ImportError: /lib64/libm.so.6: version `GLIBC_2.23‘ not found (required by /root/anaconda3/lib/pyt
- 打印机共享无法访问该计算机,共享打印机拒绝访问怎么办详细解决方案
- 如何进行电子邮箱申请(mail163),入门一分钟,终身受益
- Python功能使用学习笔记(4)--链接数据库
- 【Unity项目优化宝典】Unity3D手游开发客户端开发经验总结