一.class选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<!--
作者:[email protected]
时间:2020-02-26
描述:类选择器:给要添加样式的元素添加一个属性class
z在css中引用前加.
-->
<style>
.test1{
color: blue;
font-weight: bold;
}
.test3{
color: red;
}
.test2{
background-color: gray;
}
</style>
</head>
<body>
<ul>
<li class="test1 test2">新闻</li>
<li>视频</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<ul>
<p class="test2 test3">66666</p>
</ul>
</body>
</html>
二.通配符选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通配符选择器</title>
<!--
作者:[email protected]
时间:2020-02-26
描述:*:代表通配符选择器 用了它以后代表当前页面所有的标签公用该样式
-->
<style>
*{
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>hhhhh</p>
<h1>TMD</h1>
</body>
</html>
三:后代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器(包含选择器)</title>
<!--
作者:[email protected]
时间:2020-02-26
描述:选择某个元素的下一代
多个选择器用空格隔开
-->
<style>
#menu .test1{
color: red;
}
</style>
</head>
<body>
<div id="menu">
<h1>商品分类</h1>
<ul class="test1">
<li>家用电器</li>
<li>男女服装</li>
<li>日用百货</li>
</ul>
</div>
<div>
<h1>商品分类</h1>
<ul>
<li>家用电器</li>
<li>男女服装</li>
<li>日用百货</li>
</ul>
</div>
</body>
</html>
四:选择器分组
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器分组(并集选择器)</title>
<!--并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
或者理解成将多个相同样式定义的选择器以逗号进行分组。
语法:选择器,选择器,选择器{}-->
<style>
header, main {
width: 600px;
border: solid 1px #808080;
color: black;
font-family: "宋体";
}
header {
height: 100px;
}
header nav ul li {
float:left;
width:100px;
list-style-type:none;
}
main {
height: 300px;
}
#test1, #test2 .p1{
width:300px;
color:red;
font-family:Aharoni;
background-color:aquamarine;
}
</style>
<meta charset="utf-8" />
</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>