CSS常见选择器的用法
目录
1.CSS引入方式
1.内部样式
2.内联样式
3.外部样式
2.选择器
1.标签选择器
2.类选择器
3. id选择器
4.通配符选择器
5.后代选择器
6.子选择器
7.并集选择器
8.伪类选择器
1.hover
2.active
1.CSS引入方式
1.内部样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>div {color: aqua;font-size: 100px;}</style>
</body>
</html>
可以在html内部使用style标签来引入
2.内联样式
使用style属性,每个标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="color :aqua">哈哈哈</div>
</body>
</html>
都可以由style属性,里面可以直接写CSS
3.外部样式
把CSS写道一个单独的.css文件中,然后通过link标签引入刀heml
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><div>hahaa</div>
</body>
</html>
新建一个css文件,然后用link引入
2.选择器
1.标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><style>div {color: red;font-size: 200px;}p {color: rebeccapurple;font-size: 120px;}</style><p>我是p标签</p><div>我是div标签</div>
</body>
</html>
这里我们通过标签选择器,来进行对我们相应的标签进行操作
得到的结果是
2.类选择器
我们可以标签中使用class属性来引用对应的类
如
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><style>.a {color: aqua;font-size: 100px;}.b {color: aquamarine;font-size: 200px;}</style><div class="a"> 我是a类</div><div class="b"> 我是b类</div>
</body>
</html>
3. id选择器
每一个元素都有一个唯一的id,可以使用id选择器来选中对应的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><style>#the-id{color: bisque;font-size: 100px;}</style><div id = "the-id">偶吼吼</div>
</body>
</html>
4.通配符选择器
这个可以作为初始化的选择,可以让所有的元素都被选中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="style.css">
</head>
<body><style>* {color: aqua;font-size: 30px; }</style><div>偶吼吼</div>
</body>
</html>
这个选择器的优先级很低,适合用于初始化
5.后代选择器
在指定的元素中区筛选后代的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ol li{color: gold;}</style><ol><li>哈哈哈</li><li>哈哈</li><li>哈</li></ol><ul><li>呵呵呵</li><li>呵呵</li><li>呵</li></ul>
</body>
</html>
这就会设置ol中的li标签,而ul中的li就不会被设置
6.子选择器
和后代选择器类似,但是这个不会选中孙子元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ol>li{color: gold;}</style><ol><li>哈哈哈</li><li>哈哈</li><li>哈</li></ol><ul><li>呵呵呵</li><li>呵呵</li><li>呵</li></ul>
</body>
</html>
可以看到,仍然是被选中的
7.并集选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ol,ul{color: gold;}</style><ol><li>哈哈哈</li><li>哈哈</li><li>哈</li></ol><ul><li>呵呵呵</li><li>呵呵</li><li>呵</li></ul>
</body>
</html>
用,来分隔,就可以多选几个
8.伪类选择器
1.hover
鼠标放上去会产生效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ol:hover {color: red;}</style><ol><li>哈哈哈</li><li>哈哈</li><li>哈</li></ol></body>
</html>
这里我们鼠标放到上面,才会出现红色
2.active
鼠标按住会产生变化
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><style>ol:active {color: blue;}</style><ol><li>哈哈哈</li><li>哈哈</li><li>哈</li></ol><ul><li>呵呵呵</li><li>呵呵</li><li>呵</li></ul>
</body>
</html>
CSS常见选择器的用法相关推荐
- Html5中的徽章,CSS 常见样式 特殊用法 贯穿线徽章箭头
### 贯穿渐变线,中间插值 - 如图: >  ![在这里插入图片描 ...
- css常用选择器及用法
标签/元素选择器 作用:通过标签名选中对应的内容 语法:标签名{} 注意:html常用标签大概20多个,如果用元素选择器选中设置css样式 <div><h1>登高</h1 ...
- css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
- Python全栈（九）Web前端基础之3.CSS常见样式和选择器
文章目录 一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式 二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...
- xpath选择器和css选择器的用法
目标:xpath选择器和css选择器的用法 前文使用scrapy爬虫框架用到selector选择器了,本文补充两种选择器的使用细节 xpath选择器语法 css选择器语法 掌握常用的xpath选择器和 ...
- css class选择器用法,CSS类选择器用法简明介绍
你对CSS类选择器的使用是否熟悉,这里向大家描述一下,在CSS中,CSS类选择器通常以一个点号显示,需要注意一点的就是不要使用数字起始类名!因为它无法在Mozilla或Firefox中起作用. CSS ...
- CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:targ ...
- CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）
CSS基础 1. emmet 语法 -- 开发效率 1.1 emmet 语法生成 html 标签 emmet 的特点和作用是什么? 通过简写提高编码效率. emmet 生成 HTML 结构语法 序号 ...
- CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器 和 复合选择器,复合选择器是建立在基础选择器之 ...
最新文章
- JS实现HashMap
- python list 和矩阵的切片
- SQLSERVER DISTINCT的反例
- JDK/Dubbo/Spring 三种 SPI 机制，谁更好呢？
- CSS知识总结（五）
- hive 多用户访问模注意问题
- 微信小程序中实现瀑布流布局和无限加载
- python 工具ScreenShoot
- bytebuf池_PooledByteBuf内存池-------这个我现在不太懂
- web报表工具finereport常用函数的用法总结（数组函数）
- python的评分卡模型
- 红帽认证系统管理员 ― RHCSA
- 文字转语音怎么做？分享三种配音方法，真人语音很逼真
- Unity网格编程篇(三) 温度图、热力图
- 核函数是什么-数据的升维与降维
- excel表格数据导入导出
- 生成html水印,兼容ie8,ie兼容性问题与解决办法,移动端水印给出的建议
- 10000小时后，我从外包走进了字节跳动
- [ 重 新 预 习 ] Node.js搭建服务
- Plugin “GsonFormat“ is incompatible (supported only in IntelliJ IDEA). Plugin “GsonFormat4DataBindin