-
标签选择器,直接引用HTMl的标签名。设置标签的默认样式。
-
*
,通用选择器,选择文档中的所有HTML标签。 -
类选择器
男人、女人、老人、小孩,是不是具有相同的一些特征。
空调:制冷、制热、除湿。。。。
将有相同特征的一些标签归到一类里面。
CSS中使用
.类名
作为选择器。HTML中使用
class="类名"
__注意: __
- 类名区分大小写。
- 可以使用
标签名.类名
方式选择只具有指定类名
的标签。 - 一个标签中可以有多个类。
<span class="cl1 cl2">test</span>
- 我们可以使用
.class1.class2
这种方式来匹配同时拥有class1和class2类名的元素。只有其中一个类时是无法匹配到的。而且这种用法类名
的先后顺序可以相互颠倒。
-
- HTML使用id属性指定一个值。
- css中使用
#id的值
来作为选择器
ID的值是具有唯一性的,在一个HTML文档中,一个ID值能且只能使用一次。
类选择器相当于名字(这个名字可以多个人拥有),ID相当于身份证号。
-
组合选择器
选择器1,选择器2,选择器3.....
-
后代选择器
格式:
E F
,后代选择器,选择匹配的F元素,且匹配的F元素被包含在匹配的E元素的内部。 -
链接伪类选择器
只能用在HTML标签中的A标签中。它有两种状态已经访问、没有访问。
a:link
,匹配a标签,并且a标签定义了href并且这个地址没有被访问过。a:visited
,匹配a标签,并且a标签定义了href并且这个地址已经被访问过。
访问过之后就在缓存中了,再打开也是访问过。同一个浏览器中的多个a链接指向了同一个地址也会受到影响。
如果要删除已经访问过的记录(缓存)
ctrl+shift+del
不同浏览器的缓存是不一样的。
-
动态伪类选择器
E:active
,选择匹配的e元素,且匹配的元素被激活的那一刹那(点击)被选中。E:hover
,选择匹配的E元素,且用户鼠标移动到匹配的元素上的时候被选中。
这两个选择器不一定非要用在a链接上也可以用在其他的地方。
如果要给a链接应用上面的4个选择器必须要遵守一个
爱/恨原则
,link->visited->hover->active
(Love/HAte
)
权重值
同一个元素可能会被多个选择器选择,它们又应用了相同的规则(选择了同一个元素的多个选择器之间的同一个属性产生了冲突),这个时候要计算权重值。
权重值分为4部分:0,0,0,0
- id选择器:
0,1,0,0
- 类选择器、伪类选择器:
0,0,1,0
- 标签选择器:
0,0,0,1
- 通用选择器
0,0,0,0
- 行内样式:
1,0,0,0
你需要知道当你的选择器选择正确设置的属性也正确但是就是不生效,这个时候应该想到权重值。
注意:
- 数值越大,权重越高。
- 如果说权重相同时最后一个样式胜出。
- 如果要忽略权重值时,需要在被保护的属性后面加上
!important
,这样就可以避免它被覆盖。能少用就少用。