CSS优先级、CSS选择器、编写CSS时的注意事项
CSS的优先级:
内嵌样式>ID选择器>类选择器>标签选择器
内部样式>内部样式>外部样式
CSS的选择器:
选择器:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。
1、基本选择器(如下:):
ID选择器:根据标签ID设置标签的样式(例如:#div1{height:100px;}),通常用来设置划分区间使用。
类选择器:根据标签的类设置标签的样式(例如:.div1{height:100px;}),通常用于设置不同标签却有相同样式。
标签选择器:根据标签名设置标签的样式(例如:div{height:100px;}),通常用于当前盒子内的同一标签名的同一样式。
2、通配符选择器
通配符选择器:使用通配符(*)设置标签的样式(例如:*{height:100px;}),使用本选择器会设置所有元素的样式,通常用于消除默认样式(例如:*{margin:0px;padding:0px;)。
3、属性选择器
属性选择器:用于设置含有该 属性-值 的标签的样式(例如:div[name=BT]{height:100px;}),通常用于区分盒子内相同标签名但是属性值不一样的标签。
4、结构伪类选择器
结构伪类选择器:用于设置不同状态或者不同子元素的样式(例如::after、:before、:focus、:link、:visited、:hover、:active、nth-child()、nth-of-type()等)。
5、层次选择器
后代选择器:为当前元素的所有后代的特定标签设置样式,格式:父元素+空格+后代元素(例如:div div{height:100px;})。
子代选择器:为当前元素的特有子代的特有标签设置样式,格式:父元素+大于号+后代元素(例如:div>div{height:100px;})。
通用兄弟选择器:为当前元素的后面的所有指定兄弟标签设置样式,格式:父元素+波浪线+后代元素(例如:div~div{height:100px;})。
注意事项:如果后面的所有指定兄弟标签的标签名不为指定标签名(例如:html代码:<div></div><div></div>css代码:div~p{height:100px;}),则设置失败。
相邻兄弟选择器:为当前元素的下一个指定的兄弟标签设置样式,格式:父元素+加号+后代元素(例如:div+div{height:100px;})。
注意事项:如果下一个标签名不为指定标签名(例如:html代码:<div></div><div></div>css代码:div+p{height:100px;}),则设置失败。
CSS的注意事项:
设置CSS时需要注意一下注意事项:
①需要注意CSS的优先级
②不要让别人设置自己的样式,除非是通用样式。(兄弟或者爸爸给你设置的样式不能被清除。就像别人想打你,你却不能让他停,你自己打自己,你却可以收手。)
③使用超链接结构伪类选择器的时候,必须按照link->visited->hover->active的顺序,不然会有BUG。
CSS优先级、CSS选择器、编写CSS时的注意事项的更多相关文章
- java基础57 css样式、选择器和css定位(网页知识)
本文知识点(目录): 1.CSS样式 2.选择器 3.CSS定位 1.CSS样式 1.html 在一个网页中负责的是一个页面的结构 2.css(层叠样式表)在一个页面中负责了一个页面 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- CSS优先级的及其衡量标准CSS权重
一.背景 CSS有三大特性:层叠性.继承性.优先级. 而我们在给CSS定义样式的时候,经常出现两个及以上的规则应用在同一元素上,单该元素最终在浏览器呈现的效果是应用的哪个规则呢?这就要考虑优先级的问题 ...
- css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- css知多少——选择器的优先级
1. 引言 上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...
- CSS优先级的详细解说
一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- z-index、display、selector选择器优先级css优先级面试用到
z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
随机推荐
- windows 复制 文本文件内容 到剪切板
shell 打开 type filename | clip
- Nothing but the key 属性全部依赖于主键 third norm form
全依赖 Designs that Violate 1NF CustomerCustomer ID First Name Surname Telephone Number123 Pooja Singh ...
- Mac下文件编码转换
参见:http://bbs.feng.com/read-htm-tid-107633.html 使用: sudo find *.txt -exec sh -c "iconv -f GB180 ...
- 基于BASYS2的VHDL程序——数字钟(最终版)
转载请注明原地址:http://www.cnblogs.com/connorzx/p/3674178.html 调时电路正常工作.一切正常.发现做FPGA还是得从数电的思路思考,设置一个预置使能端,预 ...
- 对xml文件的sax解析(增删改查)之一
crud(增删改查): c:creat r:retrieve u:update d:delete 以下笔记来自于韩顺平老师的讲解. 现在是用java来操作. 第一步:新建java工程.file-new ...
- innerText和innerHTML
起因 由于公司的项目以前不考虑浏览器的兼容性问题,当时只考虑ie8浏览器,封装的控件也只针对ie8,我后面的做的时候,也就针对ie8,最近发现,封装的日期控件,在firefox竟然没法显示出来,去看J ...
- Python GIL、线程锁、信号量及事件
GIL是什么? GIL并不是Python的特性,它是在实现Python解析器(CPython)时所引入的一个概念.就好比C++是一套语言(语法)标准,但是可以用不同的编译器来编译成可执行代码.有名的编 ...
- userData IE
蛮讨厌IE的,因为他常常需要特别照顾,就像DOM Storage(sessionStorage和localStorage)只能支持IE8+,对于以下的只能使用userData. 原理:通过在docum ...
- [ZJOI 2012] 网络
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2816 [算法] 对每种颜色的边建一棵LCT , 维护联通性即可 时间复杂度 : O( ...
- ASoC框架
ASoC框架分为3部分: 1. platform(用来描述芯片的DAI接口,负责数据传输): DAI:snd_soc_dai_driver, 用来表示支持哪些格式数据, 提供设置格式的函数, 启动数据 ...