|
|
@@ -0,0 +1,78 @@
|
|
|
+<!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: red;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* id选择器 唯一的*/
|
|
|
+ /* #div1{
|
|
|
+ background: blue;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* li{
|
|
|
+ background: pink;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* class 一类"." 选中所有class名为list1的元素*/
|
|
|
+ /* .list1{
|
|
|
+ background: yellow;
|
|
|
+ } */
|
|
|
+
|
|
|
+ /* xx xx后代选择器 */
|
|
|
+ #ul1 .list1{
|
|
|
+ background: palevioletred;
|
|
|
+ }
|
|
|
+
|
|
|
+ #ul2 .list1{
|
|
|
+ background: lawngreen;
|
|
|
+ }
|
|
|
+ /* 群组/分组选择器 */
|
|
|
+ /* #div1{
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ #ul1{
|
|
|
+ background: red;
|
|
|
+ } */
|
|
|
+ #div1,#ul1{
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 伪类选择器
|
|
|
+ :hover鼠标划入
|
|
|
+ */
|
|
|
+ a:hover{
|
|
|
+ background: darkorange;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <!-- id是唯一的标识 -->
|
|
|
+ <div id="div1">我是一个div</div>
|
|
|
+ <div>我是一个div222</div>
|
|
|
+
|
|
|
+ <ul id="ul1">
|
|
|
+ <li class="list1">1111</li>
|
|
|
+ <li>2222</li>
|
|
|
+ <li class="list1">3333</li>
|
|
|
+ <li>4444</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <ul id="ul2">
|
|
|
+ <li class="list1">1111</li>
|
|
|
+ <li>2222</li>
|
|
|
+ <li class="list1">3333</li>
|
|
|
+ <li>4444</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <a href="">baidu</a>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
dongxiuling