我爱编程

（CSS）CSS基础（元素，选择器，基本特点）

2018-01-27  本文已影响0人  Katherine的小世界

最近要重新好好看书，扎实好基础，对于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选择器

(属性选择器对于一些元素的选择很有帮助，容易混淆的是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,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，有则优先级最高了。如果都有使用或者都没有使用的话，就要通过判断样式来源来决定其优先级。

再接着就是按照特殊性来判断，参照下面的特殊性图，分析特殊性。
如果特殊性权重都一样的话，再考虑样式的引入顺序。

来源的权重大小:

我总结了基本的判断顺序脑图，如下所示，希望可以帮到你。


CSS权重分析图

)

上一篇 下一篇

猜你喜欢

热点阅读