CSS面试20真题高频版-CSS选择器？优先级？哪些可继承选择器 id选择器（写法：id="box"; 使用: #box

选择器

选择DOM元素在特定状态下的样式。这些特定状态并不是由文档结构决定的，而是由用户行为（如点击、悬停）或元素的状态（如被访问、被禁用）来定义的。

写法

selector:pseudo-class {
  property: value;
}

例如

a:link {
  color: #FF0000;
}

input:focus {
  background-color: yellow;
}

常用的伪类选择器

常用的伪类选择器
:hover	鼠标悬停在元素上面的样式
:active	元素被激活时（例：button:active）
:focus	元素或者焦点时（例：input:focus）
:link	元素未被访问（例：a:link）
:visited	元素已被访问
注意 a 标签的 4 个伪类(4种状态)必须按照一定顺序书写，否则将会失效；书写顺序为：a:link、a:visited、a:hover、a:active；记忆方法：love hate - “爱恨准则”；
:enabled和:disabled	元素是否可用
:checked	用于单选框或复选框，表示元素是否被选中
:empty	指定空的元素
:root	设置HTML文档
结构伪类选择器
:first-child	选取父元素的第一个子元素
:last-child	选取父元素的最后一个子元素
:nth-child(n)	选取父元素中第n个子元素 li:nth-child(odd) 选择列表中的奇数位置
:first-of-type	表示一组同级元素中其类型的第一个元素
:last-of-type	表示一组同级元素中其类型的最后一个元素
:only-of-type	表示没有同类型兄弟元素的元素
:only-child	表示没有任何兄弟的元素
:nth-child(n)	根据元素在一组同级中的位置匹配元素:nth-last-of-type(n)匹配给定类型的元素，基于它们在一组兄弟元素中的位置，从未尾开始计委
否定伪类选择器
:not(selector)	选取不符合括号内选择器的所有元素

与伪类选择器不同，伪元素选择器是用来选择DOM元素的特定部分，而不是整个元素。它们通常用于处理那些不是由HTML标签直接表示的内容，比如首行文字、首字母或者生成的内容（如内容前面的编号）。

伪元素选择器允许我们对页面上的某些部分进行精确的样式控制，而这些部分在HTML结构中并不存在。

写法

selector::pseudo-element {
  property: value;
}

例如

p::first-line {
  color: #ff0000;
}

h1::before {
  content: '♥';
}

常用的伪元素选择器

注意：

CSS中的伪类选择器和伪元素选择器都是用来选取DOM中特定元素的选择器。具体区别如下：

总的来说，伪类选择器关注的是元素在特定状态下的样式变化，而伪元素选择器则是通过创建新的元素来实现特定的样式效果。两者都是CSS中非常强大的工具，可以帮助开发者实现复杂的页面布局和动态效果。

允许开发者根据元素的属性和属性值来选择元素

!important>内联>ID选择器>类选择器>标签选择器>属性选择器>伪类>元素选择器>通配符>继承

可继承属性
字体	font:组合字体 font-family:规定元素的字体系列font-weight:设置字体的粗细font-size:设置字体的尺寸font-style:定义字体的风格font-variant:偏大或偏小的字体
文本	text-indent:文本缩进text-align:文本水平对刘line-height:行高word-spacing:增加或减少单词间的空白letter-spacing:增加或减少字符间的空白text-transform:控制文本大小写direction:规定文本的书写方向color:文本颜色
元素可见性	visibility
表格布局属性	caption-side:定位表格标题位置border-collapse:合并表格边框border-spacing:设置相邻单元格的边框间的距离empty-cells:单元格的边框的出现与消失table-layout:表格的宽度由什么决定
列表属性	list-style-type:文字前面的小点点样式list-style-position:小点点位置list-style:以上的属性可通过这属性集合
引用	quotes：设置嵌套引用的引号类型
光标属性	cursor:箭头可以变成需要的形状

继承中比较特殊的几点:

无继承的属性