今天学的第一节CSS课！！！加油加油！！！
代码：
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/*id 选择器*/
/*#happy{
color: lightgreen;
}*/
#happy{
color: yellow;
}
/*类（class）选择器*/
.red{
color: blue;
}
/*父子选择器*/
ul li {
/*color: lightgreen;*/
}
/*通配选择器*/
ul * {
/*color: skyblue;*/
}
/*子元素选择器 “ > ”*/
ul > li {
color: skyblue;
}
/*相邻兄弟选择器*/
#happy2 + li {
/*color: lightgreen;*/
}
/*选择全部兄弟*/
#happy2 ~ li{
color: lightgreen;
}
</style>
</head>
<body>
<ul type="none">
<li id="happy">开心</li>
<li>很开心</li>
<li>非常开心</li>
<li>棒</li>
<li>很棒</li>
<li>非常棒</li>
<li>好</li>
<li id="happy2">很好</li>
<li>非常好</li>
<li>财旺</li>
<li>福旺</li>
<li>运道旺</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*根据属性名来选择元素( * 是选择全部元素)
选择所有有id属性的元素*/
*[id] {
/*color:lightgreen;*/
}
*[class] {
/*color: red;*/
}
/*根据属性的名和值来选择元素*/
li[class="green"] {
/*color: blue;*/
}
/*选择class属性中包括指定单词的元素*/
li[class ~= "red"]{
/*color:red ;*/
}
/*以“ph”开头的类样式的元素*/
li[class ^="ph"]{
/*color:yellow ;*/
} /*以“s”结尾的类样式的元素*/
li[class $="s"]{
/*color:yellow ;*/
}
/*选择属性值中包括指定字母“e”的元素*/
li[class *= "e"]{
color: lightgreen;
}
</style>
</head>
<body>
<ul type="none">
<li id="happy">开心</li>
<li>很开心</li>
<li>非常开心</li>
<li>棒</li>
<li class="red blue">很棒</li>
<li>非常棒</li>
<li>好</li>
<li id="happy2">很好</li>
<li >非常好</li>
<li class="php css">财旺</li>
<li class=" a b c e s">福旺</li>
<li>运道旺</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
