3月21号作业
基本选择器：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3-21基本选择器</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
/*元素选择器*/
ul {
padding: 0;
margin: 0 auto;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul li{
text-align: center;
list-style: none;
}
/*class选择器*/
.h2 {
text-align: center;
}
.html {
color: blue;
}
/*父子选择器*/
ul li{
background-color: #EFEFEF;
}
/*id选择器*/
#css {
color: red;
}
/*同配选择器*/
ul * {
font-size: 1.6em;
}
/*子选择器*/
ul > li{
color: purple;
}
/*相邻兄弟选择器,只选id后面一个用 “+” 全部用 “~” */
#mysql + li {
color: black;
font-size: xx-large;
font-weight: bold;
}
#mysql ~ li {
background-color: pink;
}
</style>
</head>
<body>
<h2 class="h2">必备技能</h2>
<ul>
<li class="html">html</li>
<li id="css">css</li>
<li>javascript</li>
<li>php</li>
<li id="mysql">mysql</li>
<li>nginx</li>
<li>linux</li>
<li>不忘初心</li>
<li>加油，你最棒</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
属性选择器：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>3-21属性选择器</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
/*元素选择器*/
ul {
padding: 0;
margin: 0 auto;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul li{
text-align: center;
list-style: none;
}
/*class选择器*/
.h2 {
text-align: center;
}
/*选中所有有id属性的元素*/
*[id] {
color: red ;
font-size: 1.2em;
background-color: #666;
}
/*根据属性的名和值来选元素*/
li[class="html"]{
background-color: peachpuff ;
font-size: 1.3em;
}
/*选择class属性中包括指定单词的元素*/
li[class ~="script"]{
background-color: red;
font-size: x-large;
}
/*选择以 ph 开头的类样式元素*/
li[class ^="ph"] {
background-color: #D6D7D8;
font-family: cursive;
font-style: oblique;
font-size: 1.2em;
}
/*以x结尾的类样式元素*/
li[class $="x"] {
background-color: yellow;
font-size: 1.3em;
}
li[class *="a"] {
background-color:beige;
color: brown;
}
</style>
</head>
<body>
<h2 class="h2">必备技能</h2>
<ul>
<li class="html">html</li>
<li id="css">css</li>
<li class="script 2">javascript</li>
<li class="php 1">php</li>
<li class="php 2">php</li>
<li id="mysql">mysql</li>
<li class="nginx">nginx</li>
<li class="nginx">linux</li>
<li class="aahtml">不忘初心</li>
<li class="aacss" php css>加油，你最棒</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄代码：
