css选择器
选择器
1.标签选择器
<head>
<meta charset="UTF-8">
<style>
/*<!--选择器：你要操作的页面元素
标签选择器：作用于当前页面的所有li标签-->*/
li{
color: red;
}
</style>
<title>标签选择器</title>
</head>
<body>
<ul>
<li>理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>
</body>
运行结果：
2.ID选择器
<head>
<meta charset="UTF-8">
<style>
/*ID选择器：给当前页面指定的id元素添加样式*/
#change{
color: red;
}
</style>
<title>ID选择器</title>
</head>
<body>
<ul>
<li id="change">理学院</li>
<li>计算机学院</li>
<li>外国语学院</li>
<li>汽车学院</li>
<li>机械学院</li>
<li>管理学院</li>
<li>通信学院</li>
</ul>
</body>
运行结果：
3.类选择器
<head>
<meta charset="UTF-8">
<style>
/*类选择器：给当前页面某一类标签添加样式
同一个页面，可以存在多个同名的类*/
.change{
color: red;
}
</style>
<title>类选择器</title>
</head>
<body>
<ul>
<li class="change">理学院</li>
<li>计算机学院</li>
<li class="change">外国语学院</li>
<li>汽车学院</li>
<li class="change">机械学院</li>
<li>管理学院</li>
<li class="change">通信学院</li>
</ul>
</body>
运行结果：
4.后代选择器
<head>
<meta charset="UTF-8">
<style>
/*标签选择器 1*/
li{
color: yellow;
}
/*后代选择器*/
#second li{
color: red;
}
</style>
<title>后代选择器</title>
</head>
<body>
<!--后代选择器-->
<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>上东工商学院</li>
</ul>
<ul id="second">
<li>青岛理工大学</li>
<li>上东科技大学</li>
<li>中国石油大学</li>
</ul>
</body>
运行结果：
5.子代选择器
<head>
<meta charset="UTF-8">
<style>
h1 > strong{
color: red;
}
</style>
<title>子代选择器</title>
</head>
<body>
<h1>
This is <strong>very</strong> <strong>very</strong> important. <br>
This is <em>really <strong>very</strong></em> important.
</h1>
</body>
运行结果：
6.相邻选择器
<head>
<meta charset="UTF-8">
<style>
h1 + p{
color: red;
}
</style>
<title>相邻选择器</title>
</head>
<body>
<h1>青岛各类高校</h1>
<p>青岛大学</p>
<p>青岛理工大学</p>
<p>中国石油大学</p>
<p>山东科技大学</p>
<p>中国海洋大学</p>
</body>
运行结果：
7.伪类选择器
<head>
<meta charset="UTF-8">
<style>
/*伪类选择器*/
/*li:nth-child(2n){
color: red;
}*/
/*li:first-child{
color: red;
}
li:last-child{
color: yellow;
}*/
/* li:hover {
color: red;
}*/
li:nth-child(2n):hover{
color: red;
}
li:nth-child(2n-1):hover{
color: yellow;
}
</style>
<title>伪类选择器</title>
</head>
<body>
<ul>
<li>烟台大学</li>
<li>鲁东大学</li>
<li>山东工商学院</li>
<li>青岛理工大学</li>
<li>山东科技大学</li>
</ul>
</body>
运行结果：（隔行变色）
8.通配符选择器
<head>
<meta charset="UTF-8">
<style>
/*通配符选择器*/
*{
padding: 0px;
margin: 0px;
}
#div1{
height: 200px;
background-color: red;
margin-left: 20px;
}
li{
list-style: none;
}
</style>
<title>通配符选择器</title>
</head>
<body>
<div id="div1">
<ul>
<li>理学院</li>
<li>商学院</li>
<li>通信学院</li>
<li>机械学院</li>
<li>土木学院</li>
<li>外国语学院</li>
</ul>
</div>
</body>
