为了尽量减少代码，你可以使用分组选择器。
每个选择器用逗号分隔。
在下面的例子中，我们对以上代码使用分组选择器：
实例 h1,h2,p { color:green; }
嵌套选择器 它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
p{ }: 为所有 p 元素指定一个样式。 .marked{ }: 为所有 class="marked" 的元素指定一个样式。 .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。 p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。 实例 p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked{ text-decoration:underline; }
所有CSS 尺寸 (Dimension)属性 属性 描述 height 设置元素的高度。 line-height 设置行高。 max-height 设置元素的最大高度。 max-width 设置元素的最大宽度。 min-height 设置元素的最小高度。 min-width 设置元素的最小宽度。 width 设置元素的宽度
隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
实例 h1.hidden {visibility:hidden;}
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
实例 h1.hidden {display:none;}
CSS Display - 块和内联元素 块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
内联元素的例子：
如何改变一个元素显示 可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。
下面的示例把列表项显示为内联元素：
实例 li {display:inline;}
下面的示例把span元素作为块元素：
实例 span {display:block;}
osition 属性指定了元素的定位类型。
position 属性的五个值：
static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
sticky 定位 sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
所有的CSS定位属性 "CSS" 列中的数字表示哪个CSS(CSS1 或者CSS2)版本定义了该属性。
属性 说明 值 CSS bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 auto length % inherit 2 clip 剪辑一个绝对定位的元素 shape auto inherit 2 cursor 显示光标移动到指定的类型 url auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 2 left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 auto length % inherit 2 overflow 设置当元素的内容溢出其区域时发生的事情。 auto hidden scroll visible inherit 2 overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content 2 overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域 auto hidden scroll visible no-display no-content 2 position 指定元素的定位类型 absolute fixed relative static inherit 2 right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 auto length % inherit 2 top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 auto length % inherit 2 z-index 设置元素的堆叠顺序 number auto inherit 2
CSS Overflow CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：
值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
CSS 中所有的浮动属性 "CSS" 列中的数字表示不同的 CSS 版本（CSS1 或 CSS2）定义了该属性。
属性 描述 值 CSS clear 指定不允许元素周围有浮动元素。 left right both none inherit 1 float 指定一个盒子（元素）是否可以浮动。 left right none inherit
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器(以空格 分隔) 子元素选择器(以大于 > 号分隔） 相邻兄弟选择器（以加号 + 分隔） 普通兄弟选择器（以波浪号 ～ 分隔）
所有CSS伪类/元素 选择器 示例 示例说明 :checked input:checked 选择所有选中的表单元素 :disabled input:disabled 选择所有禁用的表单元素 :empty p:empty 选择所有没有子元素的p元素 :enabled input:enabled 选择所有启用的表单元素 :first-of-type p:first-of-type 选择的每个 p 元素是其父元素的第一个 p 元素 :in-range input:in-range 选择元素指定范围内的值 :invalid input:invalid 选择所有无效的元素 :last-child p:last-child 选择所有p元素的最后一个子元素 :last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素 :not(selector) :not(p) 选择所有p以外的元素 :nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素 :nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素 :nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素 :nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素 :only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素 :only-child p:only-child 选择所有仅有一个子元素的p元素 :optional input:optional 选择没有"required"的元素属性 :out-of-range input:out-of-range 选择指定范围以外的值的元素属性 :read-only input:read-only 选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :required input:required 选择有"required"属性指定的元素属性 :root root 选择文档的根元素 :target #news:target 选择当前活动#news元素(点击URL包含锚的名字) :valid input:valid 选择所有有效值的属性 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个
元素的第一个字母 :first-line p:first-line 选择每个
元素的第一行 :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的
元素 :before p:before 在每个
元素之前插入内容 :after p:after 在每个
元素之后插入内容 :lang(language) p:lang(it) 为
元素的lang属性选择一个开始值
所有CSS伪类/元素 选择器 示例 示例说明 :link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择正在活动链接 :hover a:hover 把鼠标放在链接上的状态 :focus input:focus 选择元素输入后具有焦点 :first-letter p:first-letter 选择每个
元素的第一个字母 :first-line p:first-line 选择每个
元素的第一行 :first-child p:first-child 选择器匹配属于任意元素的第一个子元素的
元素 :before p:before 在每个
元素之前插入内容 :after p:after 在每个
元素之后插入内容 :lang(language) p:lang(it) 为
元素的lang属性选择一个开始值