Day4前端学习之路——背景边框列表链接和更复杂的选择器

课程目标

掌握 CSS 稍微复杂的一些选择器，还有背景，边框等一些 CSS 样式属性

主要内容：

• 背景属性
• 边框
• 列表
• 链接
• 其他选择器

选择器概览：https://www.w3school.com.cn/cssref/css_selectors.asp

---

一、CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定（fixed）或者随着页面的其余部分滚动（scroll）。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。 使用一些关键字：top、bottom、left、right 和 center 使用长度值，如 100px 或 5cm 使用百分数值
background-repeat	设置背景图像是否及如何重复。repeat-x 和 repeat-y、no-repeat、repeat（双向重复）

二、边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

border-style

值	描述
none	定义无边框。
hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

三、列表属性

属性	说明	值	备注
list-style-type	列表标志	标志值
list-style-image	列表项图像	url()	可用background代替
list-style-position	列表项位置	inside(文本内文本环绕)、outside(默认)、inherit
list-style	列表简写	顺序:list-style-type list-style-position list-style-image(可省略某个值)

四、链接

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}    /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}    /* 正在被点击的链接 */

注意: 一定要按照LVHA的顺序指定！可用background为连接增加小图标

五、其他选择器

（1）选择器的分组与继承

• 选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

• 子元素从父元素继承属性

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

（2）派生选择器

比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong {
    font-style: italic;
    font-weight: normal;
  }

只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。

（3）伪类选择器

• 伪类

伪类是选择器，用于选择处于特定状态的元素，例如，它们是其类型的第一个元素，或者它们被鼠标指针悬停

article p:first-child {
    font-size: 120%;
    font-weight: bold;
} 

first-child 它将始终以文章中的第一个子元素为目标

• :last-child 始终以最后一个子元素为目标
• :only-child 表示没有任何兄弟姐妹的元素
• :invalid
• 用户操作伪类

• • :hover- 上文提到的; 仅当用户将指针移动到元素（通常是链接）上时才适用。
  • :focus —仅在用户使用键盘控件聚焦元素时适用。

• 伪元素

伪元素的行为类似，但是它们的行为就像您在标记中添加了一个全新的HTML元素一样，而不是将类应用于现有元素。伪元素以双冒号开头::

例如，如果您想选择一个段落的第一行，则可以将其包装在一个<span>元素中并使用一个元素选择器。但是，如果您包装的单词数大于或小于父元素的宽度，那将失败。由于我们往往不知道一行上将容纳多少个单词（如果屏幕宽度或字体大小发生更改，这将会改变），因此无法通过添加HTML来可靠地做到这一点。该::first-line伪元素选择器会为您提供可靠的做到这一点-如果词次数的增加和减少它仍然只能选择第一行。

如果要使第一段的第一行加粗，可以将:first-child和::first-line选择器链接在一起。

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

参考文档：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements

（4）组合

Combinators	Select
A,B	匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B	匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B	匹配任意元素，满足条件：B是A的直接子节点
A + B	匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B	匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A)

（5）选择器的优先级

• 先明确一点，特指度高则优先级高，使用!important可提高优先级

CSS选择符的特指度，由它选择符中包含标签的多少、class和id决定

特指度的计算
计分公式：“ I-C-E ” 三个字母用“ - ”分隔符组成
选择符中有一个id,  "  I  " 位置加1
选择符中有一个class，“C”  位置加1
选择符中有一个标签(元素)，“ E ” 位置加1
得到一个“三位数”，这并非真正意义上的三位数

• 如果有多个选择器特指度相同，那么就由多个选择器的位置决定

!important > 行内样式 > 内嵌样式 > 外联样式写在后面的 > 外联样式写在前面的

注意 ： 权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高 。

特殊性:

• 内联样式1000;
• ID属性100;
• 类属性/属性选择/伪类010;
• 元素/伪元素001