理解CSS|青训营笔记

29 阅读2分钟

这是我参与第五届青训营伴学笔记创作活动的第2天。

1.伪类选择器包括状态伪类和结构伪类

2.组合选择器

image-20230116100308566

3.计算选择器的优先级

image-20230116101236513

4.继承

某些属性会自动继承其父元素的计算值,除非显式指定一个值。通常跟文字相关的都是可以继承的,跟盒模型相关的是不能继承的。

  • 字体样式: 作用于字体的属性,会直接应用到文本中,比如使用哪种字体,字体的大小是怎样的,字体是粗体还是斜体,等等。
  • 文本布局风格: 作用于文本的间距以及其他布局功能的属性,比如,允许操纵行与字之间的空间,以及在内容框中,文本如何对齐。
  • ](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/ul) 和 [ 元素设置margin的顶部和底部:16px(1em) 0;和 padding-left: 40px(2.5em); (在这里注意的是浏览器默认字体大小为 16px)。
  • `` 默认是没有设置间距的。
  • `` 元素设置 margin 的顶部和底部:16px(1em) ,无内边距设定。
  • [`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dd) 元素设置为: [margin-left](https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-left)40px(2.5em`)。
  • 在参考中提到的 `` 元素设置 margin 的顶部和底部:16px(1em),和其他的列表类型相同。
  • list-style-type :设置用于列表的项目符号的类型,例如无序列表的方形或圆形项目符号,或有序列表的数字,字母或罗马数字。
  • list-style-position :设置在每个项目开始之前,项目符号是出现在列表项内,还是出现在其外。
  • list-style-image :允许您为项目符号使用自定义图片,而不是简单的方形或圆形。

8.链接状态

  • Link (没有访问过的) : 这是链接的默认状态,当它没有处在其他状态的时候,它可以使用:link 伪类来应用样式。
  • Visited: 这个链接已经被访问过了 (存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
  • Hover: 当用户的鼠标光标刚好停留在这个链接,它可以使用 :hover 伪类来应用样式。
  • Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候,或者使用编程的方法来选中这个链接 HTMLElement.focus() (en-US)) 它可以使用 :focus 伪类来应用样式。
  • Active: 一个链接当它被激活的时候 (比如被点击的时候),它可以使用 :active 伪类来应用样式。
a {
​
}
​
​
a:link {
​
}
​
a:visited {
​
}
​
a:focus {
​
}
​
a:hover {
​
}
​
a:active {
​
}
​