|
|
@@ -0,0 +1,73 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* 选择器：*/
|
|
|
+ /* 标签选择器 */
|
|
|
+ /* div{
|
|
|
+ background: #f00;
|
|
|
+ } */
|
|
|
+ /* id选择器 一个页面中id是唯一的 一般用于单个样式设置*/
|
|
|
+ /* #div1{
|
|
|
+ background: blue;
|
|
|
+ } */
|
|
|
+ /* class 类选择器 一般用于多个元素样式相同*/
|
|
|
+ /* .list{
|
|
|
+ background: pink;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* ul1中class名为list的元素 变 */
|
|
|
+ /* 后代选择器 */
|
|
|
+ #ul1 .list{
|
|
|
+ background: gray;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* id为div1 的元素 和所有class名为list的元素 都一样 */
|
|
|
+ /* #div1{
|
|
|
+ background: orange;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list{
|
|
|
+ background: orange;
|
|
|
+ } */
|
|
|
+ /* 群组选择器 |分组选择器 */
|
|
|
+ #div1,.list{
|
|
|
+ background: orange;
|
|
|
+ }
|
|
|
+ /* 伪类选择器 */
|
|
|
+ a:hover{
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- id属性值是唯一的 -->
|
|
|
+ <div id="div1">111</div>
|
|
|
+ <div>222</div>
|
|
|
+
|
|
|
+ <ul id="ul1">
|
|
|
+ <li>1111</li>
|
|
|
+ <li class="list">1111</li>
|
|
|
+ <li>1111</li>
|
|
|
+ <li class="list">1111</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul>
|
|
|
+ <li>1111</li>
|
|
|
+ <li class="list">1111</li>
|
|
|
+ <li>1111</li>
|
|
|
+ <li class="list">1111</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <a id="btn" href="#">百度</a>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
dongxiuling