CSS（伪类+伪元素+css控制列表样式+背景+浮动）

CSS学习

---

CSS中伪类与伪元素

由来：
　　伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述，比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，这一情况下出现的。引用标准中的话：

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on 
information that lies outside the document tree.
（CSS 引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。）

• 其出现就是为了描述一些现有CSS无法描述的东西。
  　
  伪类和伪元素的区别：

1、伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档数外的元素；

2、CSS3规范中要求使用双冒号(::)表示伪元素，以此来区分伪元素和伪类。

然而由于IE8及以下的一些浏览器不兼容双冒号 : : 表示得方法，所以除了少部分伪元素，其余伪元素既可以使用单冒号 : ，也可以使用双冒号 : : 。为了兼容建议使用单冒号：

常见伪元素和伪类具体项：

1、伪元素：

::before/:before　 　           在某个元素之前插入一些内容；

::after/:after　　　　           在某个元素之后插入一些内容；

::first-letter/:first-letter　　为某个元素中的文字的首字母或第一个字使用样式；

::first-line/:first-line　　　　 为某个元素的第一行文字使用样式；

::selection　　　　              匹配用户被用户选中或者处于高亮状态的部分；

::placeholder　  　             匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效；

2、伪类：

表示状态：

	:link　　　  选择未访问的链接；

	:visited　  选择已访问的链接；

	:hover　　  选择鼠标指针移入链接；

	:active　　 被激活的链接，即按下单击鼠标左键但未松开；

以上顺序不能颠倒

	:focus　　  选择获取焦点的输入字段；

结构化伪类：

	:not　　　　　　  否定伪类，用于匹配不符合参数选择器的元素；

	:first-child　　 匹配元素的第一个子元素；

	:last-child　　  匹配元素的最后一个子元素；

	:first-of-type　 匹配属于其父元素的首个特定类型的子元素的每个元素；

	:last-of-type　  匹配元素的最后一个子元素；

	:nth-child       根据元素的位置匹配一个或者多个元素，它接受一个an+b形式的参数（an+b最大数为匹配元素的个数）；

	:nth-last-child　　 :nth-last-child与:nth-child相似，不同之处在于它是从最后一个子元素开始计数的；

	:nth-of-type　     :nth-of-type与nth-child相似，不同之处在于它是只匹配特定类型的元素；

	:nth-last-type     :nth-last-of-type与nth-of-type相似，不同之处在于它是从最后一个子元素开始计数的；

	:only-child　　     当元素是其父元素中唯一一个子元素时，:only-child匹配该元素；

	:only-of-type　　   当元素是其父元素中唯一一个特定类型的子元素时，:only-child匹配该元素；

	:target　　　　　    当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素；

表单相关伪类：

	:checked　　   匹配被选中的input元素，这个input元素包括radio和checkbox；

	:default　　   匹配默认选中的元素，例如：提交按钮总是表单的默认按钮；

	:disabled　    匹配禁用的表单元素；

	:empty　　     匹配没有子元素的元素。如果元素中含有文本节点、HTML元素或者一个空格，则:empty不能匹配这个元素；

	:enabled　　   匹配没有设置disabled属性的表单元素；

	:in-range     匹配在指定区域内元素；

	:out-of-range　 　 与:in-range相反，它匹配不在指定区域内的元素；

	:indeterminate　　当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该组中所有的单选框或复选框；

	:valid　　 　      匹配条件验证正确的表单元素；

	:invalid　　      与:valid相反，匹配条件验证错误的表单元素；

	:optional　　     匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性；

	:required　　     匹配设置了required属性的表单元素；

	:read-write　　   匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态

注：伪元素虽然强大，但是还是有一些特定的标签是不支持伪元素 before 和 after 的。诸如 <img> 、<input>、<iframe>，这几个标签是不支持类似 img::before 这样使用。究其原因，要想要标签支持伪元素，需要这个元素是要可以插入内容的，也就是说这个元素要是一个容器，而 input，img，iframe 等元素都不能包含其他元素，所以不能通过伪元素插入内容

---

CSS控制列表符号

list-style-type

none 无标记。

disc 默认。标记是实心圆。

circle 标记是空心圆。

square 标记是实心方块。

decimal 标记是数字。

decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)

lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman 大写罗马数字(I, II, III, IV, V, 等。)

list-style-image
使用图片代替标记

list-style-position

该属性包含两个值，分别是inside和outside。

默认情况下，list-style-position的属性值为outside。

outside：列表项目标记放置在文本以外，且环绕文本不根据标记对齐；
inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。

---

CSS背景

视窗或元素的背景

background-color 背景颜色

background-image 背景图片

background-image:url('paper.gif');

background-repeat 设置背景图片是否重复

repeat	    背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复

repeat-x 水平重复：
no-repeat 不重复：
background-attachment设置背景是否跟随内容移动

scroll	背景图片随着页面的滚动而滚动，这是默认的。
fixed	背景图片不会随着页面的滚动而滚动。
local	背景图片会随着元素内容的滚动而滚动。

background-position 设置背景的初始位置
注意对于这个工作在Firefox和Opera，background-attachment必须设置为 “fixed”

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom	如果仅指定一个关键字，其他值将会是"center"

x% y%		第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％

xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。
			如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions

background 设置背景的集合设置（简写属性）

当使用简写属性时，属性值的顺序为：:
	background-color
	background-image
	background-repeat
	background-attachment
	background-position

---

浮动

参考
https://www.cnblogs.com/starof/p/4608962.html