在HTML中常见选择器有:
行内选择器、标签选择器、id选择器、类选择器(class)
行内选择器:通过style将样式直接写在标签里面:
格式为:style=“属性1:属性值1;属性2:属性值2;…”
例如:<p style=”color: red;font-size: 32px;”>啊啊啊啊</p>
注意:最后一个属性值后面的分号可以省略,其他的属性与属性之间必须要有分号分开;现在行内选择器也比较少用,原因是比较繁琐,代码比较少可以考虑使用,但是代码一多,就很不好用了
标签选择器:就是利用标签名通过内部样式将标签+样式给表现出来;
格式:标签{ 样式1;样式2;…}
例如:
<html>
<head>
<title>标签选择器</title>
<style type="text/css">
p{
color:green;
font-size:14px;
}
</style>
</head>
<body>
<p>啊啊啊</p>
</body>
</html>
注意:标签选择器:运用范围是:标签的样式是同一格式的范围情况下,比较适用,但在同一标签多种样式的情况下不适合适用;
id选择器:在标签内定义一个id=“idname”,在内部样式中使用:#idname{样式}的方式使用id选择器。
类选择器(class):在标签内定义一个class=“classname”,在内部样式中使用: .classname{样式}的方式使用id选择器。
行内样式:写在标签里面通过style=“属性1:属性值1;….”的方式改变标签样式;例如
<p style="color:red">啊啊啊</p>
优先级:
**id选择器>标签选择器
行内样式>id选择器
类选择器>标签选择器
id选择器>类选择器
即
行内样式(最高级)>id选择器>类选择器>标签选择器
**
例子:
类选择器与标签选择器的优先级:
<html>
<head>
<meta charset="utf-8" />
<title>HTML选择器的优先级</title>
<style type="text/css">
p{
color: green;/*绿色*/
}
.blue{
color: blue;/*蓝色*/
}
#red{
color: red;/*红色*/
}
</style>
</head>
<body>
<h3>望庐山瀑布</h3>
<p >日照香炉生紫烟,</p>
<p class="blue">遥看瀑布挂前川。</p>
<p class="blue" id="red">飞流直下三千尺,</p>
<p class="blue" id="red" style="color: black;">疑是银河落九天。</p>
</body>
</html>
如图
从第一句到第四句可以很清楚的看到优先的变化是按照
行内样式(最高级)>id选择器>类选择器>标签选择器来变化的