<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<!--
*：代表通配符选择器，用了它之后就代表当前页面所有得标签共用该样式
-->
<style>
*{
color: red;
}
</style>
</head>
<body>
<p>sdufhjdsj简单介绍</p>
<h1>和对方还是否</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器（包含选择器）</title>
<!--
后代选择器选择某个元素得下一代
多个选择器之间用空格隔开
-->
<style>
#menu .test1{
color: red;
}
</style>
</head>
<body>
<div id="menu">
<h1>商品分类</h1>
<ul class="test1">
<li>家用电器</li>
<li>服装</li>
<li>日用百货</li>
</ul>
<ul class="test1">
<li>家用电器</li>
<li>服装</li>
<li>日用百货</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器分组</title>
<!--
选择器分组:创建由逗号隔开的多个选择器可以将样式应用到单个选择器匹配的所有元素中
语法：选择器，选择器｛
｝
-->
<style>
header,main{
border: 1px black solid;
width: 600px;
}
header{
height: 100px;
}
header nav ul li{
float:left ;/*左浮动*/
list-style-type: none;
width: 100px;
}
.p1{
color: red;
background-color: mediumspringgreen;
width: 300px;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>首页</li>
<li>C#程序设计</li>
<li>SQL Server</li>
<li>ADO.NET</li>
<li>HTML5</li>
</ul>
</nav>
</header>
<main>
<article>
<h1>国际新闻</h1>
<p>美国开始部署萨德系统</p>
</article>
</main>
<div id="test1">
<p class="p1">山东合并批录取 部分高校预估线出炉</p>
</div>
<div id="test2">
<p class="p1">景区客流直线上升 青岛旅游旺季提前“驾到”</p>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
