本篇文章给大家带来的内容是关于CSS选择器的代码实例以及css优先级的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
CSS入门第一节 p { color: yellowgreen; }我是DIV我是段落标签
我是大标题
/*index.css文件*/ p { /* 设置字体大小为:50像素 */ font-size: 50px; /* 设置p标签的背景色为银灰色 */ background-color: silver;} span { font-size: 28px;}
css案例
css练习 h1 { color: green; }设置p标签的背景色为红色
设置H1标签的字体颜色为绿色
设置span标签的文本为14像素
通配符选择器
CSS选择器 * { color: #3cd; } /* 通配符选择器：统统都被匹配上，可以选择到所有的标签 */标题
内容
- 北京
- 南京
- 山东
demo
CSS选择器 /* 标签选择器 */ p { color: red; } li { background-color: gold; } span { font-size: 50px; } /* id选择器 */ /* id命名规范:必须以字母开头(不限制大小写),然后可以包含数字/字母/下划线/连接符- */ #li-beijing { background-color: silver; } #li-shanghai { background-color: aquamarine; }标题
内容
- 北京
- 南京
- 山东
demo
类选择器
CSS的类选择器 .lf-p { color: green; } .fl{ background-color: #cdf; }标题
段落一
段落二
段落三
选择器综合练习
立即学习“前端免费学习笔记（深入）”；
选择器综合练习 h1 { color: red; font-size: 30px; } span { font-size: 18px; } #comt { color: yellow; /* font-size: 18px; */ } .date { color: purple; /* font-size: 18px; */ } .articleP{ font-size: 18px; color: blue; }标题
段落 时间
正文
复合选择器
复合选择器 /* 1.请把li中的class等于current的标签的背景设置为高亮(颜色为蓝色) 2.请把class为news的ul标签下面的所有的li标签中的文字设置为黑色(#333) 3.请把体育新闻和财经新闻的文字设置为银灰色 */ /* 标签指定式选择器 */ li.current { background-color: lightblue; } li#home { font-weight: bold; /*字体加粗*/ } /* 后代选择器 */ .news a { /* color:#333; */ color: green; } /* 并集选择器 */ .f-news a, .s-news a { color: silver; } /* 如果两个优先级一致的话,后面的则优先生效 */ .othernews a { color: red; } /* 并集选择器 */ html, body, p, dt, dl, dd, ul, p { padding: 0; /* 内边距 */ margin: 0; /* 外边距 */ }
子元素选择器
子元素选择器 /* 子选择器 */ p > strong { color: red; }
段落1 段落2 段落3 强调标签
属性选择器
属性选择器 span[class] { color: green; } /* 拥有id属性的标签都被选择出来 */ [id] { font-size: 50px; } span[id="4"] { color: yellow; } /* 属性包含选择器 */ span[class~="demo"] { font-size: 100px; }1 2 3 4 5
伪类选择器
伪类选择器 a:link { color: red; } /* 当链接被访问过了之后,就会添加伪类visited */ a:visited { color: lawngreen; } /* 当鼠标悬停于元素上面的时候,会自动添加伪类:hover */ a:hover { color: #fff; background-color: aquamarine } /* 当链接被点击,但是鼠标不要放开的时候, 会自动给连接添加active伪类*/ a:active { color: gold; } /* 遵循LoVe HAte 原则,否则可能无法正常显示*/ /* 获取到焦点的时候,默认给标签添加focus效果 */ input:focus{ color: red; } 首页 产品 新闻 娱乐
伪元素选择器
伪元素选择器 /* 第一个必须是span标签,第二:是第一个孩子 */ span:first-child { color: red; font-size: 50px; } /* 段落的首个字符 */ p:first-letter { font-size: 50px; color: green; } /* 设置一行 */ p::first-line { color: gold; } /* 在标签前面追加内容 */ #temp::before { content:"================"; } /* 在标签后面追加内容 */ #temp:after { content:"xxxxxxxxxxxxxxx"; }一 二 三
1 2 3
张宜成
css的特性
CSS的特性:层叠性和继承性 p { color: red; font-size: 40px; } p{ color: green; } a{ color:inherit; /*继承父标签的属性*/ } /* 继承性:父容器设置的样式,子容器也可以享受同等待遇 */ /* 所有字相关的都可以继承,比如:color,text-系列/font-系列/line-系列/cursor 并不是所有的CSS属性都可以继承,例如,下面的属性就不具有继承性:边框,外边距,内边距,背景,定位,元素宽高属性. a标签不继承父标签的字体颜色 */层叠性和继承性 我是Span标签 我是a标签,我特立独行
我是Span标签2
css的优先级
优先级 /* 继承样式大于默认样式 */ body{ color: blueviolet; } /* 嵌入样式大于外部引入 */ p { color: green; font-size: 50px; background-color: sienna; } .fs{ font-style: 400px; } #tp #atc{ font-size: 20px; /* !important是重要的意思,优先级最高高于内敛样式 */ color:lightsalmon !important; }我是段落
相关推荐：
css3如何实现自定义滚动条样式？（代码）
css选择器有哪些类型？css常用选择器的简单介绍
以上就是CSS选择器的代码实例以及css优先级的代码实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611023.html
微信扫一扫 
支付宝扫一扫 
