前端css常用的选择小汇
2018-03-13 13:17
330 查看
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。
例子:
ID选择起标签内部指定ID;
ID选择器前面不用点”.”,而用井号”#”
ID选择器只能起一个ID名;类选择器可以起多个类名。
例子:
例子:
例子:
最常用的也就是a:hover
类选择器:给标签添加一个类属性,根据类属性添加样式,可以使用多个类名,多次使用
ID选择器:给标签添加一个ID属性,ID必须是要唯一的,一个文档只能使用一次ID选择器。
子选择器:用小于号分隔,指其选择器中的子标签
包含选择器:用空格分隔,指其选择器中的所有后代标签
通用选择器:对html中所有的标签有效
伪类选择器:给标签的一个动作添加一个选择器
分组选择器:逗号分隔,同时作用给多个标签
CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】
福利二:微信小程序入门与实战全套详细视频教程
image领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
类选择器:
类选择器在css中比较常见,首先要在普通标签中设置一个类,类名不可为中文,然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”例子:
<head> <style type="text/css"> .shasha{ color:red; font-size:20px; } <style> </head> <body> <h1 class="shasha">标题</h1> <p class="shasha">第一段</p> <p> 第二段</p> </body>样式会作用于class类型为shasha的标签内容上,类名可以随便取,别用中文。
ID选择器
ID选择器与类选择器大致相同,不同的是:ID选择起标签内部指定ID;
ID选择器前面不用点”.”,而用井号”#”
ID选择器只能起一个ID名;类选择器可以起多个类名。
例子:
<head> <style type="text/css"> #shasha2{ color:red; font-size:20px; } <style> </head> <body> <h1 id="shasha2">标题</h1> <p id="shasha2">第一段</p> <p> 第二段</p> </body>
子选择器:
小于这个类的子标签例子:
.shasha>li{ border:1px solid red; }
所有后代标签选择器
小于号代表第一个后代,空格可以指定其所有后代标签例子:
.shasha li{ border:1px solid red; }
通用选择器
通用选择器,选择html文档中的所有标签。*{ border:1px solid red; font-size:20px; }
伪类选择符
给标签的某一个状态设定一个类,例如超链接标签可以设置为鼠标停留后显示别的颜色。最常用的也就是a:hover
a:hover{ color:red; font-size:20px; }
分组选择符
选择符中间以逗号隔开,等于同时给多个选择符添加样式.shasha,#shasha2 span{ color:red; }
标签选择器:
直接以html中的标签作为选择器:如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身,也称元素选择器<style tye="text/css"> p{ font-size:12px; line-height:1.6em; } html {color:black;} h1 {color:blue;} h2 {color:silver;} </style>
总结:
普通标签选择:以html中的标签选择类选择器:给标签添加一个类属性,根据类属性添加样式,可以使用多个类名,多次使用
ID选择器:给标签添加一个ID属性,ID必须是要唯一的,一个文档只能使用一次ID选择器。
子选择器:用小于号分隔,指其选择器中的子标签
包含选择器:用空格分隔,指其选择器中的所有后代标签
通用选择器:对html中所有的标签有效
伪类选择器:给标签的一个动作添加一个选择器
分组选择器:逗号分隔,同时作用给多个标签
CSS 选择器参考手册:http://www.w3school.com.cn/cssref/css_selectors.asp
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫:【编程微刊】
文末福利:
福利一:前端,Java,产品经理,微信小程序,Python等资源合集大放送:https://www.jianshu.com/p/e8197d4d9880福利二:微信小程序入门与实战全套详细视频教程
image领取方式:
如果需要学习视频,欢迎关注 【编程微刊】微信公众号,回复【领取资源】一键领取以下所有干货资源,获取更多有用技术干货、文档资料。所有文档会持续更新,欢迎关注一起成长!
原文作者:祈澈姑娘
原文链接:https://www.jianshu.com/u/05f416aefbe1
创作不易,转载请告知
90后前端妹子,爱编程,爱运营,爱折腾。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
相关文章推荐
- css入门知识:div和span,常用选择器,高级选择器
- Web前端从入门到精通-6 css简介——选择器优先级
- CSS——(CSS样式规则,CSS样式表单,选择器,常用的CSS属性)
- [cnblogs镜像]常用 CSS 选择器
- 常用html、CSS、javascript前端命名规范
- [Web前端]CSS实现“不可选择,不可复制”面临的问题
- web前端——css与文字相关的一些常用属性
- 前端常用 js一些类库的方法 css常用的
- CSS--选择符大全(常用css选择符)
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- UID-CSS-选择器-常用属性-布局-web常用图像格式
- 3.24 学前端 CSS之常用属性
- 前端之html css常用单词
- web前端常用操作集(涵盖JS、HTML、CSS)
- CSS实现垂直居中的常用方法 在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直
- <web前端>当背景图片为渐变色图片时,为避免浏览器大小问题,可以选择使用<CSS>实现渐变色,教程如下
- 前端笔试面试中的常用知识点总结(CSS)
- api日常总结:前端常用js函数和CSS常用技巧
- web前端html+css常用布局05列表布局
- web前端-CSS 属性选择器 -030