:nth-child :nth-child (1): 是父元素中的第 1 个子元素 :nth-child (n): 所有子元素, n 可以取值 0, 1, 2, 3 … :nth-child (2n): 父元素中的第偶数个子元素 跟: nth-child (even) 同义 :nth-child (2n + 1): 父元素中的第奇数个子元素 跟: nth-child (odd) 同义 :nth-child (-n + 2): 代表前 2 个子元素 <style> ul li:nth-child(3) { /*color: red;*/ font-size: 10px; } /* 0, 1, 2, 3, 4, 5...... */ ul li:nth-child(2n) { color: green; } ul li:nth-child(2n + 1) { color: blue; } /*四个一组:橘色/紫色/红色/ ...

列表HTML 提供了 3 组常用的用来展示列表的元素 有序列表： ol、 li 无序列表： ul、 li 定义列表： dl、 dt、 dd 有序列表 – ol – liol（ordered list） 有序列表，直接子元素只能是 li li（list item） 列表中的每一项 浏览器会自动添加 CSS 属性: 无序列表 – ul - liul（unordered list） 无序列表，直接子元素只能是 li 定义列表 – dl – dt - dddl（definition list） 定义列表，直接子元素只能是 dt、 dd dt（definition term） term 是项的意思, 列表中每一项的项目名 dd（definition description） 列表中每一项的具体描述，是对 dt 的描述、解释、补充 一个 dt 后面一般紧跟着 1 个或者多个 dd 一般开发时会首先重置默认属性 ol, li { padding: 0; margin: 0; list-style: none;}---------- ...

在开发中, 为了让网页更加美观, 我们经常会设置各种各样的背景 background-image设置元素的背景图片 会盖在 (不是覆盖) background-color 的上面 注意: 如果设置了多张图片设置的第一张图片将显示在最上面，其他图片按顺序层叠在下面 注意： 如果设置了背景图片后，元素没有具体的宽高，背景图片是不会显示出来的 background-repeat设置背景图片是否要平铺 常见的值有: repeat：平铺 no-repeat：不平铺 repeat-x：只在水平方向平铺 repeat-y：只在垂直平方向平铺 background-size设置背景图片的大小 常见的值有: auto：默认值, 以背景图本身大小显示 cover：缩放背景图，以完全覆盖铺满元素, 可能背景图片部分看不见 contain：缩放背景图，宽度或者高度铺满元素，但是图片保持宽高比 <percentage>：百分比，相对于背景区（background positioning area） length：具体的大小，比如 100px background-positi ...

我们可以把 HTML 每一个元素看出一个个的盒子, 可以具备这 4 个属性 内容（content）: 元素的内容 width/height 内边距（padding）: 元素和内容之间的间距 边框（border）: 元素自己的边框 外边距（margin）: 元素和其他元素之间的间距 盒子有四边, 所以 margin/padding/border 都包括 top/right/bottom/left 四个边: 在浏览器的开发工具中: content设置内容可以通过宽度和高度设置 宽度设置: width 高度设置: height 对于行内级非替换元素来说, 设置宽高是无效的! 还可以设置最大最小属性: min-width： 最小宽度，无论内容多少，宽度都大于或等于 min-width max-width： 最大宽度，无论内容多少，宽度都小于或等于 max-width 移动端适配时, 可以设置最大宽度和最小宽度; padding用于设置盒子的内边距, 通常用于设置边框和内容之间的间距 padding 包括 ...

继承CSS 的某些属性具有继承性 (Inherited): 如果一个属性具备继承性, 那么在该元素上设置后, 它的后代元素都可以继承这个属性; 如果后代元素自己有设置该属性, 那么优先使用后代元素自己的属性 (不管继承过来的属性权重多高); 如何知道一个属性是否具有继承性呢? 常见的 font-size/font-family/font-weight/line-height/color/text-align 都具有继承性; 查阅文档, 文档中每个属性都有标明其继承性 注意:继承过来的是计算值, 而不是设置值 常见的继承属性: 层叠CSS 的翻译是层叠样式表 对于一个元素来说, 相同一个属性我们可以通过不同的选择器给它进行多次设置; 那么属性会被一层层覆盖上去, 但是最终只有一个会生效 哪一个会生效呢? 判断一: 选择器的权重, 权重大的生效, 根据权重可以判断出优先级; 判断二: 先后顺序, 权重相同时, 后面设置的生效; 权重: ! important： 10000 内联样式： 1000 id 选择器 ...

开发中经常需要找到特定的网页元素进行设置样式 CSS 选择器就是按照一定的规则选出符合条件的元素，为之添加 CSS 样式 分类: 通用选择器（universal selector） 元素选择器（type selectors） 类选择器（class selectors） id 选择器（id selectors） 属性选择器（attribute selectors） 组合（combinators） 伪类（pseudo-classes） 伪元素（pseudo-elements） 通用选择器所有的元素都会被选中; 星号 * 一般用来给所有元素作一些通用性的设置 比如内边距、外边距; 比如重置一些内容; 浏览区会遍历所有的元素 (包含没用到的) 并设置值效率比较低，尽量不要使用; 简单选择器开发中用的最多的选择器 元素选择器（type selectors） , 使用元素的名称; 类选择器（class selectors） , 使用 . 类名 ; id选择器（id selectors） , 使用 #id; id 注意事项: id 值如果由多个 ...

font-size设置文字的大小 常用的设置: 具体数值+单位 比如 100px 也可以使用 em 单位 (不推荐)： 1em 代表 100%， 2em 代表 200%， 0.5em 代表 50% 百分比 基于父元素的 font-size 计算，比如 50%表示等于父元素 font-size 的一半 font-family设置文字的字体名称(一般仅设置一次) 可以设置 1 个或者多个字体名称; 浏览器会选择列表中第一个该计算机上有安装的字体; 或者是通过 @font-face 指定的可以直接下载网络上的字体。 font-weight设置文字的粗细（重量） 常见的取值: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ： 每一个数字表示一个重量 normal：等于 400 bold：等于 700 strong、 b、 h1~h6 等标签的 font-weight 默认就是 bold font-style设置文字的常规、斜体显示 常见取值: normal：常规显示 italic (斜体)：用字体的 ...

text-decoration用于设置文字的装饰线 常见取值: none： 无任何装饰线, 可以去除 a 元素默认的下划线 underline： 下划线 overline： 上划线 line-through： 中划线（删除线） a 元素默认有下划线的本质是被添加了 text-decoration 属性 text-transform用于设置文字的大小写转换 常见的值: capitalize： (使…首字母大写, 资本化的意思) 将每个单词的首字符变为大写 uppercase： (大写字母) 将每个单词的所有字符变为大写 lowercase： (小写字母) 将每个单词的所有字符变为小写 none：没有任何影响 实际开发中用JavaScript代码转化的更多 text-indent用于设置第一行内容的缩进 text-indent: 32px; 是缩进 32 个像素 text-indent: 2em; 刚好是缩进 2 倍文字 (继承自上面字体大小的设置) text-align设置文本 (包含图片, 输入框等) 的对齐方式 MDN: 定义行内内容（例如文字）如何相对它的块父 ...

官方文档:https://www.w3.org/TR/?tag=css 中文 MDN :https://developer.mozilla.org/zh-CN/docs/Web/CSS 浏览器兼容性:https://caniuse.com/ font-size字体大小 color前景色 包括文字、装饰线、边框、外轮廓等的颜色 background-color背景色 width宽度 height高度 给 div 设置了宽度后, 默认情况仍会独占整行 高度为 0 时, 不显示