CSS选择器
2019-05-11 15:18
1421 查看
CSS选择器
CSS选择器: 帮助我们找到我们要修饰的标签或者元素
①元素选择器：
[code]元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
例如：
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<div>大家好</div>
<div>大家好</div>
<div>大家好</div>
</body>
</html>
运行截图：
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{
color: red;
}
</style>
4000
</head>
<body>
<span>大家好</span>
<span>大家好</span>
<span>大家好</span>
</body>
</html>
运行截图：
②ID选择器：
[code]以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{
color: red;
}
</style>
</head>
<body>
<div id="div1">大家好</div>
<div>大家好</div>
<div>大家好</div>
</body>
</html>
运行截图：
③类选择器：
[code]以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
例如：
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.fruits{
color: red;
}
.vegetables{
color: blue;
}
</style>
</head>
<body>
<div class="fruits">香蕉</div>
<div class="fruits">苹果</div>
<div class="vegetables">辣椒</div>
<div class="fruits">梨子</div>
<div class="vegetables">茄子</div>
</body>
</html>
运行截图：
css选择器的优先级：
行内样式>ID选择器>类选择器>元素选择器
就近原则：
[code]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{
color: red;
}
.second{
color: blue;
}
</style>
</head>
<body>
<div class="first second">你好！</div>
</body>
</html>
运行截图：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 