CSS选择器

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4     <meta charset="UTF-8">
5     <title></title>
6     <style>
7     /*
8        将所有的标签设置为红色(字体)
9        元素选择器
10             作用：根据标签来选中指定的元素
11             语法：标签名{}
12             例子：p{} h1{} div{}
13        */
14     /*
15        需求一
16             将第三个p标签变为红色
17        id选择器
18         作用：根据元素的id属性值选中一个元素
19         语法：#id属性值{}
20         例子:#box{}
21        */
22     #red{
23         color:red
24     }
25     /*
26         将第4,5个p标签的字体也设置为红色
27         class 是一个标签属性，class可以重复使用
28             -可以通过class属性来为元素分组
29             -可以同事为一个元素指定多个class属性
30         类选择器
31             作用：根据元素的class属性值选中一组元素
32             语法：.red{}
33
34      */
35     .red{
36         color:red
37     }
38     /*
39     通配选择器：
40         作用：选中页面中的所有元素
41      */
42     /*
43     交集选择器
44         作用：选中同事符合多个条件的元素
45         语法：选择器1选择器2...选择器n{}
46         注意：交集选择器中包含袁元素选择器，必须使用元素选择器开头
47     将class 为red的div字体设置为红色
48
49
50      */
51     div.red{
52         color:red
53     }
54     /*
55     选择器分组(并集选择器)：
56         作用：同时选择多个选择其对应的元素
57         语法：选择器1，选择器2{}
58
59      */
60     h2,span{
61         color:blue
62     }
63     /*
64     子元素选择器
65         作用选中指定父元素的子元素
66         语法：父元素>子元素
67      */
68     div>span{
69         color:green
70     }
71     /*
72     后代元素选择器
73         作用：选中指定元素内的指定后代元素
74         语法：祖先元素后代元素
75      */
76     div span{
77         color:red
78     }
79     /*
80     选择下一个兄弟元素
81         语法：前一个兄弟元素+后一个兄弟元素
82      */
83     /*
84     属性选择器
85         作用：选择指定属性的元素
86     语法[属性名]选择含有指定属性的元素
87         [属性名=属性值]选择含有指定属性和属性值的元素
88
89      */
90     p + span{
91         color:yellow
92     }
93     /*
94     属性选择器
95         作用：选择指定属性的元素
96     语法[属性名]选择含有指定属性的元素
97         [属性名=属性值]选择含有指定属性和属性值的元素
98         [属性名^=属性值]选择属性值以指定开头的元素
99         [属性名$=属性值]选择属性值以指定结尾的元素
100         [属性名*=属性值]选择属性值中含有某值的元素
101      */
102     p[title]{
103         color:orange;
104     }
105     p[title = abc]{
106         color:orange;
107     }
108     p[title ^= abc]{
109         color:orange;
110     }
111     /*
112     伪类(不存在的类，特殊的类)
113         伪类用来描述一个元素的特殊状态
114         比如：第一个元素，被点击的元素
115     伪类一般情况下都是用冒号开头
116         :first-child
117         :last-child
118         :nth-child()选中第n个子元素
119             特殊值
120                 n第n个 n的范围0到正无穷
121                 2n或even 表示选中偶位数的元素
122                 2n+1或odd 表示徐那种奇位数的元素
123         以上这些伪类根据所有的子元素进行排序
124         :first-of-type
125         :last-of-type
126         :nth-of-type
127             这些伪类的功能与上面的功能类似，不同点是他们子啊同类型>
   元素中进行排序
128         :not()否定伪类，当符合指定要求的元素排除
129      */
130     ul>li:first-child{
131         color:orange;
132     }
133     </style>
134 </head>
135 <body>
136     
152     <h1 class = "blue abc">标题</h1>
153     <h2>标题2</h2>
154     <span>span</span>
155     <p title = "abc">少小离家老大回</p>
156     <p>少小离家老大回</p>
157     <p id = "red">少小离家老大回</p>
158     <p class = "red">少小离家老大回</p>
159     <p class = "red">少小离家老大回</p>
160     <p>少小离家老大回</p>
161     <p>少小离家老大回</p>
162     <div class = "red">我是div</div>
163     <p class = "red">我是p元素</p>
164     <div>
165         我是父元素
166         <p>
167         我是子元素
168         <br>
169         <span>我是p中的span元素</span>
170         </p>
171         <br>
172         <span>我是div中的span元素</span>
173         <span>我是div中的span元素</span>
174     </div>
175
176     <ul>
177         <li>第一个</li>
178         <li>第二个</li>
179         <li>第三个</li>
180         <li>第四个</li>
181         <li>第五个</li>
182     </ul>
183 </body>
184 </html>

笨鸟先飞