一.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与属性值中的任意位置相匹配

(4)E[attr^=val]

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

属性值以什么开头

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

(5)E[attr$=val]

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

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

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

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

CSS选择器优先级及CSS的高级选择器相关推荐

css选择器优先级及,CSS选择器优先级（转）
1. 引言上一节<css知多少(5)--选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对的,而且两个设置的颜色不一 ...
css连续选取几个li_CSS高级选择器:nth-child()应用大全
详解CSS中:nth-child的用法前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是":nth-child". 下 ...
【CSS】CSS选择器优先级及!important属性
CSS的选择器是有权重的,当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式.权重(即优先级)的规则如下,权重越高,优先级越高: 同一个元素可以使用多个规则来指定它的同一样式(比如字体颜色) ...
详细解读 CSS 选择器优先级
CSS 优先级注意事项 1.优先级就是分配给指定的 CSS 声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定. 2.而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS ...
[css] 说说CSS的优先级是如何计算的？
[css] 说说CSS的优先级是如何计算的? 选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标 ...
深入理解CSS权重(优先级)
对于上一篇:你应该知道的一些事情--CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解.最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的 ...
CSS选择器（中）——高级选择器
高级选择器,是区别于常见选择器的概念,是CSS的高级运用,也是作为扩展.总体来说,不使用高级选择器一样能做出十分优雅和绚丽的效果,但是使用高级选择器具有更高的语义化程度,而且能使你的html文本更加干 ...
css层叠引入方式有,前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器...
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器一丶CSS简介叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM ...

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

一.CSS选择器优先级

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

二.CSS高级浏览器

1.层次浏览器

(1)后代浏览器

（2）子选择器

（3）相邻兄弟选择器

（4）通用兄弟浏览器

2.属性选择器

（1）E[attr]

（2）E[attr=val]

（3）E[attr*=val]

(4)E[attr^=val]

(5)E[attr$=val]

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

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

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

CSS选择器优先级及CSS的高级选择器相关推荐

最新文章

热门文章

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

一.CSS选择器优先级

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

二.CSS高级浏览器

1.层次浏览器

(1)后代浏览器

（2）子选择器

（3）相邻兄弟选择器

（4）通用兄弟浏览器

2.属性选择器

（1）E[attr]

（2）E[attr=val]

（3）E[attr*=val]

(4)E[attr^=val]

(5)E[attr$=val]

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

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

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

CSS选择器优先级及CSS的高级选择器相关推荐

最新文章

热门文章

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

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