CSS的三大特性？(图)优先的属性

内容指南

答：在开发过程中css选择器中大于号，我们经常会遇到set style出来的情况。其实我们之前可能给某个元素设置了样式，但是样式的优先级比较高，所以指定了权重。，可以根据权重计算优先级大小，从而避免各种样式压倒一切的情况。3.1 优先级分类第一优先级：无条件优先级的属性只需要在属性后使用!important即可。（会覆盖页面任意位置定义的元素样式） 第二优先：给html中的元素标签添加样式，即行内样式。（这种方式会使CSS难以管理，所以不推荐） 第三优先级：由一个或多个id选择器定义。第五优先级：由一个或多个类型选择器定义。1.!重要>

一、CSS的三大特点？

1.1 继承：子类可以继承父类的某些样式

1.2 优先级：不同选择器定义的样式有不同的优先级数

1.3 级联：当优先级数相同时，后面定义的样式会覆盖前面定义的样式

二、CSS 有哪些选择器？

2.1 个元素选择器：div、p、img、a 等。

2.2 id 选择器：#id1、#id2

2.3 类选择器：.class1、.class2

2.4 全局选择器：*

2.5 分组选择器：相同样式的元素分组显示，用逗号分隔 div,p,a{color:#000;}

2.6 属性选择器：

a[attribute=value]:属性值为value的属性
a[attribute~=value]:属性值包含value的属性
a[attribute|=value]:属性值以value开头的属性
a[attribute*=value]:属性值包含value的属性
a[attribute^=value]:属性值以value开头的属性
a[attribute$=value]:属性值以value结尾的属性

2.7 后代选择器：在子元素和父元素之前用空格分隔 div p

2.8 子元素选择器：子元素和父元素之间用大于号分隔 div > p

后代选择器选择所有符合条件的子元素，包括子元素的子元素；但是，子元素选择器仅选择与条件匹配的直接后代。

2.9 相邻兄弟选择器：用加号分隔兄弟元素 h1+p

2.10 个伪类选择器：a:link、a:visited、a:active、a:hover、input:focus

2.11 伪元素选择器：

div:after：在 div 元素之后插入内容

div:before：在 div 元素之前插入内容

p:first-letter：给p元素的文本首字母添加样式

p:first-line：给p元素的第一行文本添加样式

三、选择器权重

问题：为什么不同的选择器有权重？

答：在开发过程中，我们经常会遇到set style出来的情况。其实我们之前可能给某个元素设置了样式，但是样式的优先级比较高，所以指定了权重。，可以根据权重计算优先级大小，从而避免各种样式压倒一切的情况。

3.1 优先级分类

第一优先级：无条件优先级的属性只需要在属性后使用!important。（它覆盖页面内任何地方定义的元素样式）

第二优先：给html中的元素标签添加样式css选择器中大于号，即内联样式。（这种方式会使CSS难以管理，不推荐）

第三优先级：由一个或多个 id 选择器定义。

第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。

第五优先级：由一个或多个类型选择器定义。

第六优先级：通配符选择器。

1.!important > 内联样式 > id 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2.但是，在大多数情况下，我们常用的选择器是组合在一起的，所以知道具体选择器所代表的权重可以方便我们在开发过程中进行简单的计算。

3.2 选择器权重级别

级别1：表示内联样式，如style=””，权重为1000

第二级：代表id选择器，如#id1，权重为100

第三级：代表类、伪类和属性选择器，权重10

第四层：代表标签选择器和伪元素选择器，权重为1

普通选择器、子选择器、相邻兄弟选择器不在这个层次结构中，所以权重为0

四、选择器优先级的简单计算

然后计算以下元素的优先级

nav ul#nav li.checked a:hover{color:#red;}

图片.png