CSS样式优先级及选择器

css样式优先级:

样式的结构顺序：外部样式>内部样式>行内样式

样式的最终显示结果：以就近原则为准

css样式选择器：

1、标签选择器:

例：h/p/span/input/div/a{ color:red;}

特点：会改变所有该元素的样式

2、类选择器:

.aa{ color: ;   }

<p class=”aa”></p >

一般给class起名字习惯“-”连接单词，可以多个名字，以空格符隔开,多个元素有同一样式要求时可以同时设置同一个名字并对其进行样式设置:

<h1 class=”bg-color size”>周一</h1>

<h1 class=”bg-color”>周二</h1>

3、ID选择器

id具有唯一性，一般只给一个父级元素加，用#显示，名字一般以“_”进行命名

基本选择器的优先级（同一元素）

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

无论是以哪种方式引入css样式（link等），不遵循就近原则，ID选择器都具有优先权

text-decorratin:去掉a链接下划线

css的高级选择器

1、层次选择器

后代选择器：

body p{ color:red;} body与 p之间空格隔开

子选择器：

div>P{color=”green”}

注：color元素会被后代元素继承，border只继承子元素

相邻兄弟选择器：

.active+p{color;}

同类型及不同类型元素都起作用

通用兄弟选择器：

选择.active下面的兄弟，不包括.active本身

同类型及不同类型元素都起作用

.active~p{color;}