有做思维图的网站吗,接单网站源码,自己用电脑网站建设,正邦设计招聘在CSS中#xff0c;我们要给一个元素定义样式#xff0c;首先得把这个元素选出来#xff0c;我在网上看了很多文章#xff0c;再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家#xff0c;哈哈哈一起学习一起进步#xff01; https://blog.csdn.net/ha…在CSS中我们要给一个元素定义样式首先得把这个元素选出来我在网上看了很多文章再结合老师所讲的精华部分将平时比较常用的选择器整理出来分享给大家哈哈哈一起学习一起进步 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 目录通配符选择器ID选择器类选择器标签选择器后代选择器子代选择器组合选择器伪类选择器重点相邻兄弟选择器相邻选择器兄弟选择器属性选择器通配符选择器
* 表示选择所有的元素。 *{margin: 0;padding: 0;}/*设置所有的HTML标签的外边距和内边距为0*/ID选择器
(#ID) 给元素添加一个id属性在样式表中用一个#就可以把元素选择出来。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1{height: 50px;width: 100px;background-color: #FFFF00;}/style/headbodydiv idbox1I am box1/div/body
/html
类选择器
.className 给需要设置样式的一类元素添加class属性然后通过一个 .aa 这种方式就可以选择到一类元素
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css.aa{color: #FFFFFF;background-color: blue;height: 200px;width: 200px;}/style/headbodydiv classaaI am one/divdiv classaaI am two/divdiv classaaI am three/div/body
/html
标签选择器
直接使用标签的名称来选择。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssp{color: coral;width: 200px;height: 60px;}/style/headbodydiv idbox1img srcimg/cat.jpg alterror titleI am cat/p classcatI am a cat/p/divspan classpigHello, I am a pig. I dont have any decorations because Im not a p tag/span/body
/html
运行结果 hahaha…可自行下载喜欢的图片玩玩
后代选择器
(父元素 子元素) 选择一个元素包含的后代可以是儿子也可以是孙子。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1 a{background-color: #FF7F50;}img{width: 350px;height: 300px;}/style/headbodydiv idbox1a href###I am the son of box1/aola href###I am the grandson of the box1/a/ol/divspan classpigHello, I am a pig. I dont have any decorations because Im not an a tag/spanimg srcimg/pig.jpg//body
/html运行结果
子代选择器
() 符号是 ,只选择儿子不选择孙子及其后代。注意这里和后代的区别
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1a{background-color: #FF7F50;}#box1p{background-color: #FF7F50;}/style/headbodydiv idbox1img srcimg/cat.jpg alterror titleI am cat/p classcatI am a cat/pa href###I am the son of box1/aola href###I am the grandson of the box1/a/ol/divspan classpigHello, I am a pig. I dont have any decorations because Im not a p and a tag/span/body
/html运行结果
组合选择器
用逗号把单个的选择器隔开就是这几个选择器选择结果的并集。
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssa,p,div,span{color: red;}/style/headbodydiv idbox1img srcimg/cat.jpg alterror titleI am cat/p classcatI am a cat/pa href###I am the son of box1/aola href###I am the grandson of the box1/a/ol/divspan classpigHello, 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
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssa:link{color: black;} a:visited{color: yellow;}a:hover{color: red;}a:active{color: green;}/style/headbodya hrefhttps://www.qq.com/我是腾讯点点我/a/body
/html有大佬提到before和after选择器了记得我们老师提到过这个一下 网上查了一下https://www.cnblogs.com/wonyun/p/5807191.html 个人觉得这个很全推荐一下后续有时间会完善尽量会描述得更加通俗易懂些哈哈哈
相邻兄弟选择器
相邻选择器 影响的是号后面的相邻的一个
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssh2p{color: red;}/style/headbodydiv idJayh2兰亭序/h2p兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/p/div/body
/html兄弟选择器
~ 受影响的是兄弟们而不是一个
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssh2~p{color: red;}/style/headbodydiv idJayh2兰亭序/h2p兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/p/div/body
/html属性选择器
语法标签名[属性名]{规则}
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssa[href] {color:red;}/style/headbodydiv idJayh2兰亭序/h2p兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pp兰亭临帖 行书如行bai云流水 月下门推 心细如你脚步碎忙不迭 千年碑易拓 却难拓你的美/pa hrefhttps://baike.baidu.com/item/%E5%85%B0%E4%BA%AD%E5%BA%8F/2879867?fraladdin兰亭序点我/a/div/body
/html这就是我整理的全部常用选择器啦如果对你有帮助留下你宝贵的小手印哈哈哈欢迎点赞评论关注一起学习一起进步。生活因学习而变得美丽
