【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 
选择器
标签选择器(学会灵活应用)
单个标签 直接使用标签名
多个标签 复杂选择器
div p 选择div内部的所有p元素
div > p 父元素为div的所有p元素
li + li 紧接在li之后的li元素
p ~ ul 选择前面有p元素的每个ul元素
比如对多个li添加下划线
可直接使用
ul li+li{
border-top:1px solid #ccc;
}id/class选择器 略过
属性选择器
- 属性名选择 img[title]含有title属性的img标签
- 属性名+属性值的选择器 比如
-
input[type='text']{ }
伪类和伪元素
伪类
- UI 伪类
-
a:link a:hover a:activted a:visited
a标签的四个伪类排列顺序和原因
link指有链接属性时 visited 链接地址已经被访问过 active 被用户激活 hover鼠标悬停
根据使用情景确定a状态
- 未被操作时 具备link属性
- 鼠标经过时 hover和link两个属性
- 鼠标点击时 具有link hover active
- 访问完成 具有link visted hover 三种状态
区分hover visited 以及link三种样式即可
四者样式顺序：link visited hover active原因：link和visited为静态常态，但一旦被访问应该覆盖原样式
在鼠标操作时，a标签同时具备hover 和active 状态 所以active必须放在hover之后
- 结构化伪类
比如： -
table tr:nth-child(even){} table tr:nth-child(odd){} table tr:first-child{} table tr:last-child{} table tr:nth-child(2n+1)
伪元素
:before 和 ：after非常常用
例如：
<style>
span:before{
content:'你好,'
}
span:after{
content:'!'
}
</style>
<span>Shirly</span>选择器优先级
使用注意：
-
尽量对外层添加class, 内层使用多级选择器，降低初步布局样式的优先级以便js处理
首先明确选择器表达式的重要程度。
公式: I-C-E
I–id —–C-class —— E-element
遇到一个id就往特指度数值中加100，遇到一个class就往特指度数值中加10，遇到一个element就往特指度数值中加1
还有一个重点要注意：!important优先级最高，高于上面一切。* 选择器最低，低于一切。
盒子模型
- 盒子宽度包括：padding+margin+boeder+内容
- div默认为block 内容宽度会因为 padding或margin 宽度变化而变化
- 包裹内容(本身不定义宽度) 盒子宽度=内容宽度+padding+margin
- div display:table
我们设定的宽度为盒子内容宽度，怎么解决问题？
建议要领：给div添加下面的属性即可实现设定的宽度即为盒子宽度。
- div display:table
box-sizing:border-box;纵向margin重叠问题
纵向的margin会重叠，值较大的覆盖掉较小的。
利用div的boder画小三角
div{
border:10 solid;
border-color:#444 transparent transparent transparent ;
width:0;
}
来源：oschina
链接：https://my.oschina.net/u/2882840/blog/738733