一方面，选择器CSS选择器是CSS规则的第一部分
元素和其他部分的组合，以告诉浏览器应该在应用规则中选择哪个HTML元素作为CSS属性值
在选择器中选择的元素称为“选择器对象”
我们从Html结构开始
divid=' box ' divclass=' one ' pclass=' one _1'/PP class=' one _1'/p/divdivclass=' two '/divdivclass=
选择id选择器(#box )、id为box的元素
类选择器. one，选择类名为one的所有元素
标签选择器(div )，选择标签为div的所有元素
后代选择器#box div，id为box元素内部的所有div元素都将被选中
子选择器(.oneone_1)选择父元素为. one的所有. one_1的元素
相邻同胞选择器(.one .two )选择紧跟在. one之后的所有. two元素
选择组选择器(div、p )、div和p的所有元素
有些选择器使用频率相对较少：
伪类选择器
:link :“选择未访问的链接”:visited“选择已访问的链接”:active“选择活动链接”:hover“鼠标指针
:first-letter :用于选择指定选择器的第一个字符的：first-line :选择指定选择器的第一行：before:选择器，并在选定元素的内容之前选择内容：
选择具有[attribute]attribute属性的元素选择所有使用[ attribute=value ] attribute=value的元素[attribute~~=value]attribute
层次选择器(p~ul )，选择前面有p元素的每个ul元素
伪类选择器
:first-of-type父元素的第一个元素：last-of-type父元素的最后一个元素：only-of-type父元素的特定类型的唯一子元素：only-child父元素中唯一的子元素3: nth-th th-last-of-type(n )选择父元素的第n个子元素，然后选择：last-child父元素的最后一个元素：root设置HTML文档：empty空元素：enabled
attribute *=value :选择属性属性值中包含value的所有元素[ attribute ^=value ] :选择属性开头为value的所有元素[ attribute $
内联ID选择器类选择器标签选择器
对于特定的计算层，优先级由a、b、c和d值决定。 其中，值的计算规则如下：
如果存在内联样式，则A=1，否则A=0
b的值与ID选择器显示的次数相同
c的值等于类选择器、属性选择器和伪类发生的总数
d的值等于标签选择器和伪元素发生的总次数
现在举个例子：
#nav-globalullia.nav-link应用上述算法，依次求出A B C D的值。
因为没有内联样式，所以A=0
ID选择器共计出现1次，B=1
类选择器出现一次，属性选择器出现0次，伪类选择器出现0次，因此c=(10 )=1
标签选择器出现3次，伪要素出现0次，因此D=(3 0 )=3
以上算出的a、b、c、d可以简单地记为(0、1、1、3 )
知道了优先顺序的计算方法后，看看比较规则吧。
从左向右依次进行
比较 ，较大者优先级更高如果相等，则继续往右移动一位进行比较
如果4位全部相等，则后面的会覆盖前面的
经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!important
三、继承属性在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性
关于继承属性，可以分成：
字体系列属性
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：箭头可以变成需要的形状继承中比较特殊的几点：
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
参考文献https://www.html.cn/qa/css3/13444.html
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors
-- The End --
系列正在更新：2/20
点击下方卡片解锁更多
创作不易，星标、点赞、在看 三连支持