HTML三大选择器的使用和命名方式,优先级,以及选择器中常见错误及解决方法

HTML中的三大选择器

1.标签选择器:使用标签的名称作为选择器,选中标签设置样式,

特点:可以选中多个标签,给一堆标签同时设置样式

书写方式

标签名{

样式

}

2.类选择器:在标签中利用class属性设置子啊样式表中,特点:相当于给标签起了一个别名,可以重名.可以有多个名称

书写方式

.类名{

样式

}

3.id选择器:在标签中利用id属性进行设置,特点:一个标签有且只有一个id,

且不能重名,前端规范要求.不允许使用id选择器来设置样式,原因:

优先级太高,不方便其他样式叠加

书写方式

#id名{

样式

}

选择器命名规则:

1.不能以数字开头

2.见名知意

3.当类型名需要有多个单词组成时

使用小驼峰命名法:从第二个单词开始,首字母大写

重点:

1.三大基本选择器优先级

id>class>标签

2.样式设置不生效的三大原因

2.1:设置的样式被其他样式叠加,设置的样式优先级没有其他样式优先级高

2.2:样式属性名写错

Unknown property name(浏览器错误提示) 样式属性名写错

Invalid property value(浏览器错误提示) 样式属性值写错

2.3:样式表中选择标识符写错

样式表中选择之间不能有其他字符,如果有,将向下与相邻的选择器

构成新的选择器,导致选不中

检查方法:在谷歌浏览器的控制台中,选中该标签,然后查看styles里面的

选择器,查看哪个选择器不存在,那么该选择器标识符写法出错