CSS3----基本选择器及其扩展 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             /*
 8                 通配符，类选择器（.），id选择器（#），元素（元素名），后代（空格），分组（，叫做结合符）
 9                 
10                 css声明的优先级，不是选择器优先级
11                 
12                 >
13                 直接后代选择器
14                 兄弟选择器只会匹配紧跟着的兄弟元素
15             */
16           /* *{
17                margin: 0;
18                padding: 0;
19            }
20            #wrap > li{
21                color: pink;
22                border: 1px solid;
23            } */
24         </style>
25     </head>
26     <body>
27         <ul id="wrap">
28             <li>1</li>
29             <li>2</li>
30             <li>3</li>
31             <li>4</li>
32             <li>5</li>
33         </ul>
34     </body>
35 </html>

1.基本选择器
/*通配符选择器*/ * { margin: 0; padding: 0; border: none; }
/*元素选择器*/ body { background: #eee; }
/*类选择器*/ .list { list-style: square; }
/*ID选择器*/ #list { width: 500px; margin: 0 auto; }
/*后代选择器*/ .list li { margin-top: 10px; background: #abcdef; }


2.基本选择器扩展
/*子元素选择器*/ #wrap > .inner {color: pink;}
也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}
它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}
它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/ h1,h2,h3{color: pink;}
此处的逗号我们称之为结合符

 

posted @ 2021-07-09 11:26  2237774566  阅读(47)  评论(0)    收藏  举报