实操代码带你理解CSS中的常用选择器(你值得掌握!)
在CSS中,我们要给一个元素定义样式,首先得把这个元素选出来,我在网上看了很多文章,再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家,哈哈哈一起学习一起进步!
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注!
欢迎关注微信公众号:宝藏女孩的成长日记
如有转载,请注明出处(如不注明,盗者必究)
目录
- 通配符选择器
- ID选择器
- 类选择器
- 标签选择器
- 后代选择器
- 子代选择器
- 组合选择器
- 伪类选择器(重点)
- 相邻兄弟选择器
- 相邻选择器
- 兄弟选择器
- 属性选择器
通配符选择器
(*)
表示选择所有的元素。
*{margin: 0;padding: 0;}/*设置所有的HTML标签的外边距和内边距为0*/
ID选择器
(#ID)
给元素添加一个id属性,在样式表中用一个#就可以把元素选择出来。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{height: 50px;width: 100px;background-color: #FFFF00;}</style></head><body><div id="box1">I am box1</div></body>
</html>
类选择器
(.className)
给需要设置样式的一类元素添加class属性,然后通过一个 .aa 这种方式就可以选择到一类元素
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">.aa{color: #FFFFFF;background-color: blue;height: 200px;width: 200px;}</style></head><body><div class="aa">I am one</div><div class="aa">I am two</div><div class="aa">I am three</div></body>
</html>
标签选择器
直接使用标签的名称来选择。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">p{color: coral;width: 200px;height: 60px;}</style></head><body><div id="box1"><img src="img/cat.jpg" alt="error" title="I am cat"/><p class="cat">I am a cat</p></div><span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p tag</span></body>
</html>
运行结果
hahaha…可自行下载喜欢的图片玩玩
后代选择器
(父元素 子元素)
选择一个元素包含的后代,可以是儿子,也可以是孙子。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 a{background-color: #FF7F50;}img{width: 350px;height: 300px;}</style></head><body><div id="box1"><a href="###">I am the son of box1</a><ol><a href="###">I am the grandson of the box1</a></ol></div><span class="pig">Hello, I am a pig. I don't have any decorations because I'm not an a tag</span><img src="img/pig.jpg"/></body>
</html>
运行结果
子代选择器
(>)
符号是> ,只选择儿子,不选择孙子及其后代。(注意这里和后代的区别)
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1>a{background-color: #FF7F50;}#box1>p{background-color: #FF7F50;}</style></head><body><div id="box1"><img src="img/cat.jpg" alt="error" title="I am cat"/><p class="cat">I am a cat</p><a href="###">I am the son of box1</a><ol><a href="###">I am the grandson of the box1</a></ol></div><span class="pig">Hello, I am a pig. I don't have any decorations because I'm not a p and a tag</span></body>
</html>
运行结果
组合选择器
用逗号把单个的选择器隔开,就是这几个选择器选择结果的并集。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a,p,div,span{color: red;}</style></head><body><div id="box1"><img src="img/cat.jpg" alt="error" title="I am cat"/><p class="cat">I am a cat</p><a href="###">I am the son of box1</a><ol><a href="###">I am the grandson of the box1</a></ol></div><span class="pig">Hello, I am a pig. I have a style because I use the combination selector</span></body>
</html>
运行结果
伪类选择器(重点)
:
a:link{
/*未访问状态*/}a:visited{
/*已访问状态*/}a:hover{
/*鼠标悬停状态*/}a:active{
/*激活选定状态(鼠标点击未释放时)*/}
注意:这个顺序是不能改变的
方便记忆:“LOVE HATE”
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a:link{color: black;} a:visited{color: yellow;}a:hover{color: red;}a:active{color: green;}</style></head><body><a href="https://www.qq.com/">我是腾讯,点点我</a></body>
</html>
有大佬提到before和after选择器了,记得我们老师提到过这个一下
网上查了一下,https://www.cnblogs.com/wonyun/p/5807191.html
个人觉得这个很全,推荐一下,后续有时间会完善,尽量会描述得更加通俗易懂些哈哈哈
相邻兄弟选择器
相邻选择器
+
影响的是+号后面的(相邻)的一个
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">h2+p{color: red;}</style></head><body><div id="Jay"><h2>兰亭序</h2><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p></div></body>
</html>
兄弟选择器
~
受影响的是兄弟们,而不是一个
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">h2~p{color: red;}</style></head><body><div id="Jay"><h2>兰亭序</h2><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p></div></body>
</html>
属性选择器
语法:标签名[属性名]{规则}
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">a[href] {color:red;}</style></head><body><div id="Jay"><h2>兰亭序</h2><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><p>兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美</p><a href="https://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fr=aladdin">兰亭序,点我</a></div></body>
</html>
这就是我整理的全部常用选择器啦,如果对你有帮助,留下你宝贵的小手印哈哈哈,欢迎点赞+评论+关注!一起学习一起进步。生活因学习而变得美丽!
实操代码带你理解CSS中的常用选择器(你值得掌握!)相关推荐
- CSS中定位(带你实操代码掌握固定定位、绝对定位与相对定位(子绝父相))
https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 固定定位 绝 ...
- 一篇文章带你快速入门JavaScript(实操代码)
目录 一.前提简介 1.1什么是JavaScript 1.2JavaScript和Java语言的区别 1.3Html.Css和Javascript 1.4Javascript作用 二.实操代码 2.1 ...
- hiredis从安装到实操,带 API 详解
文章目录 花个两分钟跟我一起配置hiredis redis的C/C++ API 建立连接 写数据库 读数据库 释放内存 释放连接 实操代码示例 花个两分钟跟我一起配置hiredis 当我们下载了最新版 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- 一文带你理解Java中Lock的实现原理
转载自 一文带你理解Java中Lock的实现原理 当多个线程需要访问某个公共资源的时候,我们知道需要通过加锁来保证资源的访问不会出问题.java提供了两种方式来加锁,一种是关键字:synchron ...
- 深入理解CSS中的line-height的使用
深入理解CSS中的line-height的使用 什么是line-height(行高)? line-height 是指两行文字基线之间的距离. 什么是基线? 基线.底线.顶线.中线 注意: 基线(bas ...
- 【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
- 【教程搬运】读懂github上的工程代码——带你熟悉Python中的Parser
读懂github上的工程代码--带你熟悉Python中的Parser 1.导入包 2.实例化ArgumentParser 3.使用add_argument函数添加参数 4.使用parse_args解析 ...
- 深入理解CSS中的层叠上下文和层叠顺序
转载一篇张鑫旭大神的文章(对于理解GPU硬件加速和网页分层还是有一点帮助的),原文地址:深入理解CSS中的层叠上下文和层叠顺序 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论 ...
最新文章
- mysql sa密码是什么_忘记mysql数据库root密码
- #define 用法
- 没有统计学基础可以学python-如何系统地自学 Python?
- Richardson RazorSQL中文版
- RV1108开发环境搭建
- python基础教程:类型转换和舍入
- Focal Loss 论文笔记
- Django内置权限扩展案例
- 推理集 —— 特殊与差异
- 电脑重装系统后如何删除微软商店下载记录
- Python学习资料篇
- mysql计算百分比_mysql – 如何计算百分比?
- 有道云笔记分享_原来分享可以更美的 有道云笔记分享功能优雅变身
- VGG model 涉及到的paper
- 2D卷积和3D卷积的区别及pytorch实现
- cordova通过指纹插件进行指纹验证
- python笔试编程题_Python自动化测试笔试面试时常见的编程题
- [学习笔记]Windows CMD/bat
- 使用京东云免费云主机搭建CentOS
- win10系统怎么禁用某个程序联网,阻止软件联网
热门文章
- python网址太长_Python GUI-长链转短链
- 默认文献工具_工具分享??超好用的SCI外文文献下载工具
- instanceof 和 对象转型
- Edge 修改字符编码(详细图文)
- 步苹果iOS的后尘,谷歌Android12“翻车”,更新需谨慎?
- Maven学习(四)————Eclipse 中的 Maven 工程
- Linux进阶之路————远程登录与vim编辑器
- Log4j文件配置教程大全
- java8 stream 做累加_《Java 8 in Action》Chapter 1:为什么要关心Java 8
- java包裹邮费计算_GitHub - honghailiang/FreightSystem: 基于Java Swing编写的简易运费计算工具...