css选择器有哪些？优先级？哪些属性可以继承？

一、选择器

CSS选择器是CSS规则的第一部分

它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式

选择器所选择的元素，叫做“选择器的对象”

我们从一个Html结构开始

<div id="myDiv">
    <div class="myClass">
        <p class="one_1">
        </p >
        <p class="one_1">
        </p >
    </div>
    <div class="two"></div>
</div>

css属性选择器常用的有：

• id选择器（#myDiv），选择id为box的元素

• 类选择器（.myClass），选择类名为one的所有元素

• 标签选择器（div），选择标签为div的所有元素

• 后代选择器（#myDiv div），选择id为box元素内部所有的div元素

• 子选择器（.myClass>one_1），选择父元素为.one的所有.one_1的元素

• 相邻同胞选择器（.myClass+.two），选择紧接在.one之后的所有.two元素

• 群组选择器（div,p），选择div、p的所有元素

• 伪类选择器

:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素

• 伪元素选择器

:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容

• 属性选择器

二、优先级

CSS的优先级是用来确定当多个样式规则应用到同一个HTML元素时，哪个样式规则将被应用的一种规则。CSS优先级按照一定的规则来计算，通常称为“优先级权重”，计算得分最高的样式规则将被应用到HTML元素。

内联 > ID选择器 > 类选择器 > 标签选择器

1. 内联样式（Inline Styles）：直接在HTML标签中使用style属性定义的样式规则。例如：

   <div style="color: red;">Hello World</div>

   内联样式的优先级最高。

2. ID选择器（ID Selectors）：通过在CSS中使用#符号定义的ID选择器。例如：

   #myDiv { color: blue; }

   每个页面上同一ID选择器的优先级只计算一次。

3. 类选择器、属性选择器和伪类选择器（Class Selectors, Attribute Selectors, and Pseudo-class Selectors）：通过在CSS中使用.（点号）、[]和:定义的选择器。例如：

   .myClass { font-size: 16px; }
   [type="text"] { background-color: #fff; }
   :hover { color: green; }

   这些选择器的优先级相同。

4. 元素选择器和伪元素选择器（Element Selectors and Pseudo-element Selectors）：通过在CSS中直接使用元素名称定义的选择器，以及通过::定义的伪元素选择器。例如：

   p { font-weight: bold; }
   ::before { content: "»"; }

   这些选择器的优先级相同。

5. 通配符选择器和属性选择器（Universal Selectors and Attribute Selectors）：使用或者加属性名称的选择器，例如：

   * { color: gray; }
   [disabled] { opacity: 0.5; }

   通配符选择器和属性选择器的优先级相同。

6. 继承（Inheritance）：某些属性会被继承到子元素，但是继承并不会影响优先级的计算。继承的属性优先级比默认样式低，但比其他选择器优先级低。

注意事项：

• !important：在样式规则后面添加!important标志可以将其优先级提升到最高，即使有更高优先级的样式存在。但是，过度使用!important可能导致样式难以维护，因此应当谨慎使用。
• 内嵌样式表和外部样式表：当相同选择器的样式规则在不同位置定义时，后面定义的样式将覆盖前面的样式，无论其优先级如何。
• 继承：某些样式属性会被子元素继承自父元素，但并不影响优先级的计算。

三、继承属性

继承属性，可以分成：

• 字体系列属性

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