伪元素，伪类，以及CSS选择器

pupuk commented 6 years ago

伪类与伪元素

介绍文章比较多，我们重点思考，出现的原因，以及如何用好。 1、伪类其实可以通过在dom节点上，通过js，添加或者移除class来实现。那既然如此，为何不针对常见的，如：focus，hover，active这些，内置到浏览器，我们通过简单设置class属性，就能轻松的实现各种「状态的」样式。正因为w3c的建议，浏览器实现了伪类功能。我们才能很方便的使用。注意顺序：一般是 link，visited，focus，hover，active。（顺序很重要，否则会样式会覆盖）

2、伪元素正是由于伪类的成功，而逐渐普及开的。举个例子，伪元素一般推荐用两个冒号（::），如 p::before 但是最初的写法却是 p:before (一个冒号) 原因就是在伪元素概念没有明确提出来的时候，before属性是和伪类的属性如 a:hover是一个理解层次的东西。后来伪元素的概念明确后，才区分了伪类用一个冒号，伪元素用两个冒号。 https://segmentfault.com/a/1190000013737796 单闭合标签如<br> <img>没有伪元素创造性的使用伪元素可参见 https://segmentfault.com/a/1190000013740397

作用： 1、伪类和伪元素不在DOM树中，简化了HTML结构，不会为了特定的样式，绑定过多的类或者添加一些子元素。

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

利用::before和::after做的纯css icon图标 https://saeedalipoor.github.io/icono/

pupuk commented 6 years ago

block

1、默认的width，height都是auto，width是父元素能容纳的最大width，height是根据内容撑开的height 2、可设置width，height 3、可设置padding，margin（上右下左）

inline

1、默认的width，height都是auto，width，height都是根据内容撑开的 2、不可设置width，height（也可以说设置无效） 3、设置的margin只在水平方向生效。设置的padding可在垂直和水平方向都生效，但是不会把父级元素撑高。

inline-block

1、对外呈现inline，对自身呈现block。可设置width，height，padding，margin。 2、注意理解BFC

pupuk commented 6 years ago

CSS选择器

选择器很多，不用挨个去记忆，思考后在大脑形成体系和分类也许更为重要吧

1、通配符和元素选择器

通配符，后代div p，子 div>p，相邻div+，多个span,dd

2、类，ID .class，#id

3、属性 a[src^="https"]，支持~，&，$，等各种匹配符

4、伪元素&伪类 :first-child 等 ::after 等

pupuk / blog