CSS的几种选择器
选择器
基础选择器
标签选择器
标签选择器可以把一类标签全部选择出来，能快速为同类标签统一设置样式，但是无法做出差异化设置。
<style>
div {
color: green;
}
</style>
<body>
<div>
标签选择器
</div>
</body>
类选择器
可以给需要修改样式的标签指定class值，通过类选择器将其选择出来，进行样式修改
<style>
.header {
color: green;
}
</style>
<body>
<div class="header">
类选择器
</div>
</body>
类选择器可以进行多类名使用，多类名在标签以空格隔开
<style>
.header {
color: green;
}
.box {
width:400;
}
</style>
<body>
<div class="header box">
类选择器
</div>
</body>
id选择器
通过给标签指定id来，进行选择，与类选择器有相似处，但是id选择器只能选择一次，不能被选择第二次，是一次性的。
<style>
#box {
width:400;
}
</style>
<body>
<div id="box">
id选择器
</div>
</body>
通配符选择器
选取页面中的所有元素标签。
<style>
* {
color: red;
}
</style>
复合选择器
复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。
后代选择器
选择外层标签里面的所有内层标签。外层标签写在前面，内层标签写在后面，以空格隔开。
<style>
.header p {
color: green;
}
</style>
<body>
<div class="header">
<p>
后代选择器
</p>
</div>
</body>
子选择器
只选择作为某元素下一级的元素，不可跨级选择, 使用>连接。
<style>
.header > p {
color: green;
}
</style>
<body>
<div class="header">
<p>
子选择器
</p>
</div>
</body>
并集选择器
同时选择不同的标签，使用,隔开。
<style>
.header,p,h1 {
color: green;
}
</style>
<body>
<div class="header">
<p>
并集选择器
</p>
<h1>
并集选择器
</h1>
</div>
</body>
伪类选择器
向某些标签添加特殊效果，比如给链接添加特殊效果。
伪类选择器具有使用顺序否为无效，link>visited>hover>active
<style>
/* 未点击的链接 */
a:link {
color: green;
}
/* 访问过的链接 */
a:visited {
}
/* 鼠标经过的链接 */
a:hover {
}
/* 鼠标正在按下还没有抬起的链接 */
a:active {
}
/* 获取到焦点的表单元素 */
input:focus {
background-color:yellow;
}
</style>
<body>
<a>伪类选择器</a>
<input type="text">
<input type="text">
</body>
CSS的几种选择器的更多相关文章
- [No000016A]CSS常用三种选择器
1.HTML Tag p{color:red;} 2.id #myid{color:red;} 3.class .myclass{color:red;} CSS常用文本样式属性 color font- ...
- CSS基础语法(二) CSS的9种选择器
样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器 ...
- 大家好，又是新的一天。今天给大家带来一些新的知识：选择器的种类和css的三种样式
今天我们为大家 选择了 六种 选择器: 1. 标签选择器 2.id选择器 3.class选择器 4.后代选择器 5.子代选择器 6.交集选择器 我们就举三个典型的例子:后代选择器,子代选择器和交集选择 ...
- CSS 常见的8种选择器 和 文本溢出问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css四种选择器总结
css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重. 做 ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- 理解CSS中的三种选择器>+~
1. p~ul p和ul有相同的父元素,选择出p元素之后的所有ul元素,其中,p和ul不一定是紧随,但是必须有相同的父元素 E+F 相邻兄弟选择器.选择匹配F的元素,且该元素位于 ...
随机推荐
- JSTL详解（常用标签以及c:forEach遍历集合）
JSTL标签 一. JSTL的简介 1. 什么是JSTL 2. JSTL常用标签库 3. JSTL使用步骤 二. 核心标签库常用标签 1. c: set 标签 2. c: out 标签 3. c: i ...
- pip导出项目依赖包名称及版本，再安装命令
A导出依赖 pip freeze >requirements.txt B导入安装依赖 pip install -r requirements.txt 使用下面的命令安装依赖能自动跳过安装错误的依 ...
- Ubuntu20.04中创建Pycharm桌面快捷方式
[Desktop Entry] Type=Application Name=Pycharm GenericName=Pycharm3 Comment=Pycharm3:The Python IDE E ...
- 什么是机器学习的分类算法？【K-近邻算法(KNN)、交叉验证、朴素贝叶斯算法、决策树、随机森林】
1.K-近邻算法(KNN) 1.1 定义 (KNN,K-NearestNeighbor) 如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类 ...
- 不用关闭重启cad及不用更改快捷方式或者版本号c#调试cad插件
c#开发的cad插件需要重启cad才能进行调试,然而高版本的cad启动比较慢特别是一些古董电脑,而且cad有重启次数限制.针对不用重启cad调试已经有成熟的方案了,但是需要调试一次修改一次快捷方式或者 ...
- 解决关于ARM_MATH数学库宏定义的报错
昨天在建立新工程的时候发现加入含有ARM_MATH库的时候出现了宏定义报错. #error directive:"Define according the used Cortex core ...
- PicCompress —— 一款精简的图片压缩工具
PicCompress 说明 之前上传博客图片过大不方便加载,还有一些微信平台的图片无法上传有大小限制,于是就打算开发个压缩图片的工具 支持图片格式 PNG(.png) JPEG(.jpg, .jpe ...
- 详解javascript的eventloop(一)
先看一段代码 console.log('Hi') setTimeOut(function cb1(){ console.log('cb1') },500) console.log('Bye') 第一步 ...
- 6.2 计划任务crond
创建.编辑计划任务的命令为crontab -e,查看当前计划任务的命令为crontab -l,删除某条计划任务的命令为crontab -r. 参数 作用 -e 编辑计划任务 -u 指定用户名称 -l ...
- HMS Core使能AI智慧体验，共建创新应用生态
5月17日,2022年搜狐科技峰会成功举办,峰会汇聚各界大咖,共同探讨AI 技术的深入应用以及行业数字化的发展趋势.华为终端云服务应用生态BU总裁望岳发表题为<使能AI智慧体验,共建创新应用生态 ...