CSS选择器优先级及CSS的高级选择器

一.CSS选择器优先级

发现ID选择器 > 类选择器 > 元素选择器

如果引入样式的改变会有影响吗？那需不需要遵循就近原则呢？

 所以可以得到：无论哪种引入样式（内部样式，行内样式，外部样式） 

                          都是ID选择器 > 类选择器 > 元素选择器，且不遵循就近原则！！！

总结CSS选择器：

1.标签选择器直接应用于HTML标签

2.类选择器可在页面中多次使用

3.ID选择器在同一个页面中只能使用一次

二.CSS高级浏览器

1.层次浏览器

(1)后代浏览器

E F         选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内

 如果<ul><p><li>这种情况下可以吗？

 答案是 可以的，这个相当于 li是ul的孙子级别，p是爸爸

 如果是div去包裹li会有变化吗？

 答案是 不会 因为li被div包裹的情况下不会变红，被ul包裹才会变红

小练习+避坑

 如果用p span直接应用到第一行和第二行可以吗？

 操作过后发现不行，之前不是说是孙子级别嘛，现在为什么不行了？

可以右击检查或者按F12，去看一下里面的代码

 从这张图可以发现，p并没有包含住span，所以没有变化。这是为什么？

因为p标签表示包裹一个段落 段落里面的可以是文字 也可以是 行内元素 但是不可以是块元素

p标签包裹块级元素的时候 会出现包不住的情况（包括p标签本身）

注意点：

后代选择器两个选择符之间必须要以空格隔开，中间不能有任何其他的符号插入 

空格可以多 但是不可以插入其他的符号以免造成干扰

（2）子选择器

E>F 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素

 （3）相邻兄弟选择器

 E+F   选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面

 是active下面的一个产生变化

（4）通用兄弟浏览器

 E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

active下面的所有li标签都会产生变化

border:1px solid red;        意思是加上一个 1像素的红色实线

1px:像素为1            solid:实线             red:红色

2.属性选择器

（1）E[attr]

E[attr]  选择匹配具有属性attr的E元素 

[]表示属性的意思 里面写具体属性的名称比如 [id]

 （2）E[attr=val]

E[attr=val]  选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写） 

E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中

（3）E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

9

 (4)E[attr^=val]

E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

属性值以什么开头

在遇到匹配的字符 有特殊符号 比如 :号 // 可以使用引号（单引号和双引号）包裹一下

 (5)E[attr$=val]

E[attr$=val]  选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

在属性后面的值加不加引号都行（包括单引号或双引号）

在遇到匹配的字符 有特殊符号 比如 : // 可以使用引号（单引号和双引号）包裹一下

大小写是区分 如果值是小写 你*号后面是大写 元素是不能被找到的