最近要重新好好看书，扎实好基础，对于CSS一直处于一种捉摸不透的感觉，最近看书，感觉受益匪浅，所以就在github上开了一个仓库，专门记录自己的学习补充过程。
我的CSS记录github地址，喜欢就关注哈。
先扔一张图出来:
CSS权重分析图
)
CSS元素
CSS元素按照HTML元素，可以分为两种，
- 块元素
- 行元素(行内元素和行内块元素)
按照元素本身的特点来说，可以分为以下两种:
- 替换元素
- 非替换元素
替换元素和非替换元素
替换元素
是元素中内容可以被替换的元素，浏览器根据元素的标签和属性来决定元素的内容。
像
img元素和input元素，都是替换元素，因为img的内容是由图片的链接src决定的，而input显示为什么样子，也是由其type值决定的。
<img src='test.url'>,<input type='radio'>， 这两个不是闭合标签，也没有由用户自定义填充的内容可言。
非替换元素
指的是内容不可以被替换的元素，一旦内容被用户填充了之后，就不可以被其他元素替代了。
<p>哈哈哈哈</p>其中p标签内的内容已经确定了.也不能被替换了。
行元素和块元素
行元素
在文档中没有独占一行。一般的行内元素有span, a, strong都是典型的行内元素，当然，上面所提及到的替换元素也几乎都是行内元素。
块元素
在文档中独占一行,其左右没有别的元素。div, p, li``````h都是典型的块元素。.
当然，CSS中允许你通过display去改变一个元素的显示方式。
注意事项：行内元素可以作为块元素的后代，但是块元素不能作为行元素的后代。试想一想，
<span><div>这样子做肯定蜜汁尴尬</div></span>
这样肯定很尴尬。最好不要这样子做。
🤨 常见问题解释与区分点：
块元素因为自身就是独占一行的元素，所以可以给其设置width和height。
行内元素不能给其设置width和height，只有通过设置display:block或者display:inline-block；才能设置。
替换元素如img,input其实是行内块元素，所以可以给其设置width和height。
2 🙃 为什么img标签的底部会有空白？
这个问题主要是因为图片是行内元素，行内元素是基于baseline去对其的，而其他如元素内的字体是以最低的线去对齐的，所以会有这种空隙问题。
可以使用vertical-align:middle来解决。
参考链接：参考链接,如何解决img下的空白问题
css选择器
- id选择器 #test
- class选择器 .test
- 元素选择器 p
- 属性选择器
- p[attr='test'] 属性attr等于test的p标签
- p[attr^='test'] 属性ttr是以test开头的p标签
- p[attr$='test'] 属性attr是以test结尾的p标签
- p[attr~='test'] 属性attr是包含有test的p标签
- p[attr*='test'] 属性值中包含有test子串的p标签。
(属性选择器对于一些元素的选择很有帮助，容易混淆的是p[attr~='test']和p[attr='test'])。
举个例子，对于元素<div test-id='yesa no'></div>。
其中div[test-id='yes'] 即可以选择到元素，因为这个div元素的test-id属性包含有yes这个子串。而如果使用div[test-id~='yesa']才能获取到子串。
我的理解如下：
p[attr~='test']是部分属性值选择器，
p[attr*='test'] 是属性子串匹配选择器。
- 后代选择器 p a
- 子选择器 p > a
- 相邻兄弟选择器 p + a
- 兄弟选择器 p ~ a
- 伪元素选择器 :first-letter ::before ::after
- 伪类选择器 :first-line
CSS3新增的一些选择器 - first-child: 作为某一个父元素的第一个子元素
- last-child ： 作为某一个父元素的最后一个子元素
- nth-child(n): 作为一个父元素的第n个子元素
- nth-child(odd)： 作为某一个父元素的奇数子元素
组合选择器:
如果需要同时对多个选择器设置相同的样式，可以使用组合选择器。如p,a,div.
多类选择器:
如果需要匹配同时拥有多个类的元素，就需要用到多类选择器。如 .test.success可以匹配以下元素。
<div class='test success'></div>
但是不能匹配<div class='test'></div>
相信我，CSS的选择器使用得当，真的可以很强大。后续会补上例子。
CSS的三大特点
- 特殊性
- 继承性
- 层叠性
特殊性：
既然前面提到了那么多的选择器，那么要匹配到一个元素的方法其实有很多种，如果有多个选择器与元素匹配了，而且其内部的样式声明还冲突了，那么元素应该选择哪个选择器的匹配样式就显得非常重要。考虑如下
现在有一元素:
<div class='test' id='test'><h1>我是为测试而生的</h1></div>
以下由三个样式设置:
.test h1{color:red;}
#test h1{color:pink}
h1{color:yellow;}
那么，特殊性的重要性就在这里体现了，只有知道特殊性才能知道最终h1会显示什么颜色。
当然，后面会提及到继承样式，这里需要说明一点，继承的值根本没有特殊性，设置连0特殊性都没有。考虑以下情况:
*{color:red;}
h1#page{color:pink;}
<h1 id='page'>哈哈哈<em>虎虎虎</em></h1>
最终，em标签内的内容会显示为red颜色，因为通配符的特殊性为0，而从h1标签继承下来的颜色属性值是无特殊性的。
继承值没有特殊性这一点非常重要，因为浏览器会默认给一些元素设置一些样式属性，而如果仅仅想要通过继承属性去覆盖原有的样式，是不可能的。
例子如下:
<div class='test2'>
我是黑色的
<a href="">嘿嘿嘿，我还是蓝色的</a>
</div>
.test2 {
color: black;
}
最终.test2内部的a标签还是显示蓝色，因为浏览器给其设定的默认样式颜色就是蓝色。而继承的样式是没有特殊性的。
继承性：
基于继承机制，样式不仅会应用到指定的元素，还会应用到它的后代元素。这个值会沿着树向下传播到后代元素，并一直持续，直到再没有更多的后台元素继承这个值为止。
继承的属性值有:
color
font
font-size
font-weight
font-style
text-indent
text-align
line-height
word-spacing
letter-spacing
text-transform
不能继承的属性值有:
border
padding
margin
background
verticle-align
text-shadow
white-space
display
大体上涉及到字体的都有继承性质。涉及到排版的和展示方式的就不能继承。
层叠性：
"层叠样式表"所提到的就是，CSS会样式层叠在一起，这是通过结合特殊性和继承做到的。总结下来就是下面这个图。
一般都是按权重,来源，特殊性和顺序来排序的。简单地说明一下，一般会先从权重来判断，就是先判断属性值有没有使用!important，有则优先级最高了。如果都有使用或者都没有使用的话，就要通过判断样式来源来决定其优先级。
再接着就是按照特殊性来判断，参照下面的特殊性图，分析特殊性。
如果特殊性权重都一样的话，再考虑样式的引入顺序。
来源的权重大小:
- 1 读者的重要声明
- 2 创作人员的重要声明
- 3 创作人员的正常声明
- 4 读者的正常声明
- 5 用户代理说明
我总结了基本的判断顺序脑图，如下所示，希望可以帮到你。
CSS权重分析图
)
网友评论