セレクターとは？セレクタの役割は、それを介して要素を見つけ、CSSスタイルを要素に渡すことです。CSSセレクターは主に4つのカテゴリーに分けられます：基本セレクター、属性セレクター、組み合わせセレクター、疑似クラスセレクター！
CSS基本セレクター
基本的なセレクターは、さらにワイルドカード、タグセレクター、クラスセレクター、およびIDセレクターに分類されます。ここで注意する必要があるプログラミングのアイデアは、CSSカスケードスタイルシートにIDを1つだけ持っています。次の点に注意してください。1. IDの一意性2.要素idは同じではありません。IDはIDカードを表します。IDはIDカードを表します。クラスセレクターは一意ではなく、再利用できます！さらに、このワイルドカードはグローバルを表します
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css基本选择器</title>
7 <style type="text/css">
8 *{
9 color: skyblue;
10 }/**通配符*/
11 div{
12 color: red;
13 }/*标签选择器*/
14 .box{
15 color: steelblue;
16 }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜色为 steelblue 17 #content{
18 color: tomato;
19 }/*id选择器*/
20 </style>
21 </head>
22 <body>
23 <div class="box" id="content">
24 学习Q-q-u-n： 784783012 </div>
26 </body>
27 </html>
CSSコンビネーションセレクタ
基本セレクターは特殊記号で接続されます。一部の意見はcss組み合わせセレクターと呼ばれます。一般的なcss組み合わせセレクターは、同じレベルのグループセレクター、ネストされたセレクター、サブセレクター、および隣接するセレクターです。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css组合选择器</title>
7 <style type="text/css">
8 /* div{ 9 color: teal; 10 font-size: 24px; 11 } 12 p{ 13 color: teal; 14 } */
15 div{
16 font-size: 24px;
17 }
18 div,p{
19 color: teal;
20 }/*分组选择器*/
21 div p{
22 color: red;
23 }/*嵌套选择器*/
24 ul>li{
25 font-size: 24px;
26 list-style: square;
27 }/*子选择器*/
28 div+p{
29 color: blue;
30 }/*相邻同级别选择器*/
31 </style>
32 </head>
33 <body>
34 <div>
35 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨 36 <p>自以为懂得很多了经历很多了最后才知道都是那么的可笑</p>
37 </div>
38 <p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</p>
39 <p>成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</span></p>
40 <ul>
41 <li>1</li>
42 <li>2</li>
43 <li>3</li>
44 </ul>
45 </body>
46 </html>
CSS属性セレクター
基本セレクター[属性]、基本セレクター[属性=値]、基本セレクター[属性〜=値]複数のスペースで区切られたスペース、基本セレクター[属性^ =値]開始位置、基本セレクター[属性$ =値]で終わる
专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>css属性选择器</title>
7 <style type="text/css">
8 div[title]/*基本选择器[属性]*/
9 div[title=english]{
10 color: blue;
11 }/*基本选择器[属性=值]*/
12 div[title~=en]{
13 color:#f90;
14 font-weight: bold;
15 }/*基本选择器[属性~=值] 任意包含有属性中的一个*/
16 p,div[title^=zh]{
17 font-size:24px;
18 color: brown;
19 }/*基本选择器[属性^=值]以什么开始*/
20 div[title$=china]{
21 letter-spacing: 10px;
22 text-decoration: line-through;
23 font-style: italic;
24 }/*基本选择器[属性$=值]以什么结束*/
25 </style>
26 </head>
27 <body>
28 <div title="english">
29 If you can NOT explain it simply, you do NOT understand it well enough 30 </div>
31 <div title="english en yingyu">
32 你们没发现嘛？2013爱你一生，2014爱你一世，2015爱你一屋，2016爱你一路，2017爱你一切，2018爱你一半，2019爱你依旧，2020爱你爱你，2021爱你而已