|
在CSS中，咱们要给一个元素定义样式，首要得把这个元素选出来，我在网上看了非常多文案，再结合老师所讲的精华部分将平时比较常用的选取器整理出来分享给大众，哈哈哈一块学习一块进步！
目录 通配符选取器ID选取器类选取器标签选取器后代选取器子代选取器组合选取器伪类选取器（重点）相邻兄弟选取器相邻选取器兄弟选取器属性选取器
通配符选取器
（*） 暗示选取所有的元素。
*{
margin: 0;
padding: 0;
}
/*设置所有的HTML标签的外边距和内边距为0*/
ID选取器
(#ID) 给元素添加一个id属性，在样式表中用一个#就能够把元素选取出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 50px;
width: 100px;
bac 公斤round-color: #FFFF00;
}
</style>
</head>
<body>
<div id="box1">
I am box1
</div>
</body>
</html> 类选取器
（.className） 给必须设置样式的一类元素添加class属性，而后经过一个 .aa 这种方式就能够选取到一类元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{
color: #FFFFFF;
bac 公斤round-color: blue;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="aa">I am one</div>
<div class="aa">I am two</div>
<div class="aa">I am three</div>
</body>
</html> 标签选取器
直接使用标签的名叫作来选取。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
color: coral;
width: 200px;
height: 60px;
}
</style>
</head>
<body>
<div id="box1">
<img src="img/cat.jpg" alt="error" title="I am cat"/>
<p class="cat">I am a cat</p>
</div>
<span class="pig">Hello, I am a pig. I dont have any decorations because Im not a p tag</span>
</body>
</html>
运行结果
| 
发表于 2024-6-30 06:41:13