2019.10.18【CSS选择器+优先级权重】

一、CSS概述？

1. 什么是Css?

CSS，全称“Cascading Style Sheets”，用于设置HTML标签的样式，美化网页。

2. CSS的基本机构？

3. CSS的使用方式？

内嵌样式”：写在style标签对里面。
“行内样式”：直接写在标签行上面。
“外链样式”：单独写一个css文件，通过link标签引入。
“导入式”：单独写一个css文件，通过@import导入。
(1) “内嵌样式”：写在style标签对里面

(2) “行内样式”：直接写在标签行上面。

(3) “外链样式”：单独写一个css文件类型，通过link标签引入。

(4) “导入式”：单独写一个css文件，通过@import导入。
该方法是在

注意：
导入式可以同时导入多个样式,但导入每个文件时要如同写内嵌样式时，在每个属性值的末尾加上一个分号结尾。

1. 在开发中关于css样式一般或多或少都会使用一些行内样式与内嵌样式，但是主体还是通过引入单独的css文件进行使用的。
2. Link与@import两种方式都可以引入单独的css文件,我们一般选择link标签，即外链式。
3. Link与@import一些区别
   ①　link除了加载CSS文件以外，它还能加载其它类型文件，如“icon”，而“@import”只能加载CSS文件
   给网页加上图标：<link rel="shortcut icon" href="oa.jpg">
   ②　link在现代的浏览器中是多线程加载的，也就是说在通过该标签加载一个文件的时候body标签内的DOM也在执行同步的加载。加载效率高于@import
   ③　link作为一个标签，也就是一个DOM元素，是可以通过JavaScript进行操作的（如增加、删除link标签，修改link的属性值等）。而“@import”写在style标签内部或CSS文件内（写在style标签内和CSS文件内的写法一致），是无法通过JavaScript进行操作的。

三、常用css选择器

1. CSS的基础选择器主要有三个：
   “标签选择器”、“类选择器”和“ID选择器”。
2. 一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。

②　后代选择器
后代选择器是对某元素所嵌套的指定元素进行选择，每个选择符之间用空格进行分割，多个嵌套层次应该以多个空格进行分割
#par p{
font-size: 50px;
}

③　子选择器
子选择器区别与后代选择器的地方就是，后代选择器可以选择嵌套在标签内部任意层级的标签元素，而子选择器只能选择当前标签往内一层的元素。每个选择符之间用“>”进行分割，
#par > h1{
font-size: 12px;
}

④　伪类选择器
伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。
作用于a标签上的伪类选择器如下：
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

通用伪类选择器如下（如果要同时生效，顺序不能变）：
:hover 鼠标悬浮于该元素上设置的样式
:active 鼠标点击到该元素上，设置的样式

⑤　群组选择器
群组选择器的使用范畴是，多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化，CSS框架设计以及后期CSS代码优化时会经常使用
div,p,h1{
color: red;
}

#p1,.mydiv,h1{
color: red;
}

⑥　同级（兄弟）元素选择器
选定当前标签同级的其它指定标签。
同级元素有两种，即“+”和“~”，
“+”只能选择该标签下一个对应标签
#p1 + h1{
color:red;
}
选择#p1对应的标签的下一个h1标签，给他设置css样式为红色字体
“~”能选择该标签后的所有同级相应标签。
#p1 ~ h1{
color:red;
}
选择#p1对应的标签的后面所有的h1标签，给他们设置css样式为红色字体

⑦　属性选择器
该选择器所针对的既不是某个标签，也不是类名，或者ID，它是将一个标签的属性作为选择器来使用，最常用的地方就是涉及到属性多而杂的表单元素。基本写法是“[” + “属性名” + “]”的格式，该选择器的定义方式如下：
(1) [属性名]{…样式设置内容…}
将标签中的一个属性作为选择选择器
[title]{
color: red;
}
(2) [属性名=“属性值”]{…样式设置内容…}
将标签中的一个属性名值对作为选择器
[title=“iamh1”]{
color: red;
}
(3) [type^=“datetime”]{…样式设置内容…}
将标签中的一个属性名名为“type”，属性值以“datetime”开头的属性名值对作为一个选择器
[title^=“iam”]{
color: red;
}
(4) [title$="picture"]...样式设置内容...将标签中的一个属性名名为“title”，属性值以“picture”结束的属性名值对作为一个选择器[title$=“z”]{
color: red;
}
(5) [title*=“is”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值含有“is”的属性名值对作为一个选择器
[title*=“h”]{
color: red;
}
(6) [title~=“a”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值含有空格分隔的词为“a”的属性名值对作为一个选择器
[title~=“a”]{
color: red;
}

(7) [title|=“this”]{…样式设置内容…}
将标签中的一个属性名名为“title”，属性值等于“this”或以“this”开头的属性名值对作为一个选择器。以连字符(-)连接的如lang =“this-us”，也算以this开头
[title|=“a”]{
color: red;
}

四、Css选择器优先级判断

当样式冲突时，将根据【权重+就近原则】来判断以谁的样式为准。
基本类型选择器权重
行内样式：1000
Id选择器： 100
Class选择器：10 【属性选择器】
标签选择器：1
*任意符选择器：0 （大于默认样式与继承验样式）
就近原则
当权重值相同时，谁和要设置的html标签隔得近，谁的权重就高。
组合选择器权重
群组选择器： 单独计算
后代，子代，兄弟等选择器：权重相加。