CSS的几种常用选择器
程序员文章站
2022-04-27 22:31:25
...
1.元素选择器
把<span>标签的内容都改成蓝色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<span>讲完这个内容大家就可以下课了</span>
<span>讲完这个内容大家就可以下课了</span>
<span>讲完这个内容大家就可以下课了</span>
<span>讲完这个内容大家就可以下课了</span>
</body>
</html>
2.ID选择器
将ID为div1的元素改为红色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
注意：ID必须是唯一的
* */
#div1{
color: red;
}
</style>
</head>
<body>
<!--请将JAVAEE颜色改成红色-->
<div id="div1">JAVAEE</div>
<div>IOS</div>
<div>ANDROID</div>
</body>
</html>
3.类选择器
把class="shuiguo"的元素改成黄色 class="shucai"的元素改成绿色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
-->
<style>
.shuiguo{
color: yellow;
}
.shucai{
color: green;
}
</style>
</head>
<body>
<!--
请将水果类,改成黄色
蔬菜类改成绿色
-->
<div class="shuiguo">香蕉</div>
<div class="shucai">黄瓜</div>
<div class="shuiguo">苹果</div>
<div class="shucai">茄子</div>
<div class="shuiguo">橘子</div>
</body>
</html>
选择器的优先级
行内样式 > ID选择器 > 类选择器 > 元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*元素选择器*/
div{
color: red;
}
/*类选择器*/
.chifan{
color: deeppink;
}
/*ID选择器*/
#div1{
color: greenyellow;
}
/*
按照选择器搜索精确度来编写:
行内样式 > ID选择器 > 类选择器 > 元素选择器
*/
.first{
color: green;
}
.second{
color: blue;
}
/*就近原则*/
</style>
</head>
<body>
<!--<div class="chifan" id="div1" style="color: goldenrod;">扩展完,就可以去吃饭啦!</div>-->
<div class="second first ">讲完这个真的可以去吃饭啦!</div>
</body>
</html>
上一篇： 骆秉章为什么被称为“诸葛复生”？晚清名臣骆秉章的一生！
下一篇： css的#和.的区别