实例
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS选择器 -基本选择器 和 属性选择器</title>
<meta charset="utf-8">
<style type="text/css" >
li { /* 元素选择器使用Li 属性选择器 排版 <li> 并定义初始颜色为黑色*/
float: left;
padding: 10px;
color: black; /*可省略*/
}
/* 通配符选择器 --> */
/*通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。
.demo 表示class="demo" 下所有的元素重新定义
.demo * 可以意思为 demo 下的一个元素*/
/*.demo * {
padding: 0px;
color: red;
} */
/*类选择器
类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在，这样才能选择类
*/
.wo {
color:red;
}
/* 四、id选择器（#ID）
ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id)
*/
#one{
color: yellow;
}
</style>
</head>
<body>
<div class="demo"> <!-- 包一个div块 并用class定义-->
<!--一个无序列表-->
<ul type="none">
<li id="one" class="one">1</li>
<li class="t wo">2</li>
<li class="t hree">3</li>
<li class="four">4</li>
<li class="five">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li id="last" class="last">10</li>
</ul>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
