CSS选择器与优先级详解(一)

html-css015

CSS选择器与优先级详解(一),第1张

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。

HTML

CSS

执行效果:

b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。

HTML

CSS

执行效果:

c.元素选择器:通过note节点名称匹配元素。

HTML

CSS

2.属性选择器:

注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。

CSS3新增了一些属性选择器,待持续更新。

3.组合选择器

示例如下:

实现效果如下:

示例如下:

从高到低依次是:

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

参考:

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器

一、简单的选择器

1)标签选择器

与网页元素同名,用的最多,也简单,即直接作用于与该选择器名字相同的标签

2) 类选择器

能够为网页对象定义不同的样式类,实现不同元素拥有相同的样式,相同元素的不同对象拥有不同样式

3)类选择器和标签结合在一起==>指定类选择器

指定该类用于特定的标签范围内

4)ID选择器(ID唯一)

这个就不举例讲解了,类比类选择器,把"."换成"# "即可

5)通配选择器

如果所有元素都需要定义相同的样式,推荐使用通配选择器

二、复合选择器

1)子选择器

2)相邻选择器(二者有相同父元素)

**利用相邻的兄弟元素来控制,即相邻选择器就是指定一个元素相邻的下一个元素的样式。相邻的选择器使用+表示

3)包含选择器(后代选择器)

第一对象一定要内包含第二对象

4)选择器嵌套

5)属性选择器

属性选择器就是利用网页标签包含的属性及其属性值来定义特定对象或一定范围元素的样式。

1.匹配属性名选择器

2.扩展

3.匹配属性值选择器

4.模糊匹配属性值选择器

类似正则表达式

6)伪选择器和伪元素选择器

标签之间可以通过逗号隔开来设定多个标签的CSS样式