电脑做服务器发布网站,大连旅顺网站制作,石家庄做网站公司,免费的素材网站有哪些在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这就是我整理的全部常用选择器啦如果对你有帮助留下你宝贵的小手印哈哈哈欢迎点赞评论关注一起学习一起进步。生活因学习而变得美丽