前端中级篇（2）

前端———中级篇（2）https://blog.csdn.net/qq_36749611/article/details/86764445CSS整理笔记
css的表现形式
css样式表采用覆盖的形式来表现定义的样式，就像土地原来是黄色的，后来长草变成绿色的，冬天下雪又变成白色。css就像草皮，雪层一样，多个选择器表现的形式是覆盖而不是替换。
基本选择器
通配器可以选择所有标签；
元素选择器选择指定标签；
ID选择器选择指定标签，但ID必须在该页面唯一；
类选择器选择相同的一类元素，同一个页面中可以有很多个相同的类名；
群组选择器将具有相同样式的元素之间用逗号隔开，表示这几个不同选择器使用了相同的样式。
通配选择器 *
*{margin:0;padding:0}
选择所有标签，并设置内边距外边距都为0
1
2
元素选择器 E
p{background:grey}
p标签下的元素样式背景为灰色
1
2
ID选择器 #ID
#my{background:grey}
my标签下的背景为灰色
1
2
类选择器 .class
.item{background:green}
item标签下的背景为绿色
1
2
群组选择器 selector1，selectorN
selector1,selector2,selector3,...selectorN{
margin:10px;
...
}
1
2
3
4
层次选择器
层次选择器通过HTML的DOM元素间的关系获取元素
E F 后代选择器(包含选择器)：选择匹配的F元素，匹配的F元素包含在匹配的元素E内，这里F元素不管是E元素的子元素，孙辈元素，或者是更深层次的元素都会被选中。
E>F 子选择器：选择匹配的F元素，匹配的F元素是匹配E元素的子元素，即只选择E的子元素。
E+F 相邻兄弟选择器：选择匹配的F元素，匹配的元素位于E元素后，E，F是同辈分元素，F位于E后面，并且相邻。
E~F 通用选择器：选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素，选择所有兄弟元素，选择位于E后的所有兄弟。
<html>
<head>
<title>演示</title>
<meta content="">
<style type="text/css">
*{margin: 0;padding: 0;}
body{width: 300px;margin: 0 auto;}
div{margin: 5px;padding: 5px;border: 1px solid #ccc;}
/*后代选择器*/
div div{background: orange;}
/*子选择器*/
body > div {background: green;}
/*相邻兄弟选择器*/
.active + div{background: lime;}
.active ~ div{background: red;}
</style>
</head>
<body>
<div class="active">1</div>
<div> 2</div>
<div> 3</div>
<div>4
<div> 5</div>
<div> 6</div>
</div>
<div> 7
<div> 8
<div> 9
<div>10 </div>
</div>
</div>
</div>
</body>
</html>

猜你喜欢