[CSS3] 学习笔记-CSS选择器

Posted 2020-06-17

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3] 学习笔记-CSS选择器相关的知识，希望对你有一定的参考价值。

CSS3中，选择器的分类很多，有元素选择器、类选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。

1、最常见的选择器就是元素选择器，文档的元素就是最基本的选择器，例如，h1{},a{}

2、选择器分组：h1,h2{}、*{}

3、类选择器允许以一种独立于文档元素的方式来指定样式：.class{}；

可以结合元素选择器：a.class{}；

多类选择器：.class.class{}

4、ID选择器与类选择器相似，不过也有一些重要差别，例如：#id{}

ID选择器与类选择器的区别：ID只能在文档中使用一次，而类可以使用多次；ID选择器不能结合使用；当使用Js时，需要使用Id:GetElementById()

5、属性选择器：[title]{} ，title是属性的名称

也可以根据具体的属性值进行选择：除了选择拥有某些元素，还可以进一步缩小选择范围，只选择有特定属性值的元素，例如：a[href="www.baidu.com"]{};

也可以指定属性和属性值完全匹配；

也可以根据部分属性值选择。

6、后代选择器：后代选择器

7、子元素选择器：与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素,即只支持一层关系，不支持多层关系：h1>strong{}

8、相邻兄弟选择器：可选择紧接在另一个元素后的元素，且二者有相同父元素，例如：h1+p{},h1和p有相同父类

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link href="1.css" type="text/css" rel="stylesheet">
 7     <style>
 8         /*简单属性选择*/
 9         [title]{
10             font-size: 100px;
11         }
12         [href] {
13             font-size: 20px;
14         }
15 
16         /*属性和属性值完全匹配*/
17         [href="http://www.jikexueyuan.com"]{
18             font-size: 40px;
19         }
20 
21         /*部分属性选择器*/
22         [title~="title"]{
23             font-size: 100px;
24         }
25     </style>
26 </head>
27 <body>
28     <p>Hello World !</p>
29     <h1>标题1</h1>
30     <h2>标题2</h2>
31     <div class="div">Hello Css</div>
32     <a class="div">hello a class</a>
33     <p class="p1">this is p class p1</p>
34     <p class="p2">this is p class p2</p>
35     <!--class=p1 p2 的这个元素，包含了类p1 p2的属性，同时还可以自己再定义属性-->
36     <p class="p1 p2">this is p class p3</p>
37     <div id="mydiv">Hello Selector1</div>
38 
39     <!--以下操作允许，class可以重复-->
40     <div class="div1"></div>
41     <div class="div1"></div>
42     <div class="div1"></div>
43 
44     <!--以下操作不允许，id不能重复-->
45     <!--<div id="div1"></div>-->
46     <!--<div id="div1"></div>-->
47     <!--<div id="div1"></div>-->
48 
49     <p title="">Hello 属性选择器</p>
50     <a href="">极客学院</a>
51     <a href="http://www.jikexueyuan.com">极客学院</a>
52     <p title="title hello">hello部分属性选择器</p>
53     <p>这是<strong>父<i>级</i></strong></p>
54 
55     <div>
56         <ul>
57             <li>item1</li>
58             <li>item2</li>
59             <li>item3</li>
60             <li>item4</li>
61         </ul>
62         <ol>
63             <li>item11</li>
64             <li>item12</li>
65             <li>item13</li>
66         </ol>
67     </div>
68 </body>
69 </html>

对应的CSS文件：

 1 /*选择器分组-通配符*/
 2 *{
 3     font-size: 50px;
 4     margin: 0px;
 5     padding: 0px;
 6 }
 7 
 8 /*元素选择器*/
 9 p{
10     color: coral;
11 }
12 
13 /*选择器分组*/
14 h1,h2{
15     color: red;
16 }
17 
18 /*类选择器*/
19 .div{
20     color: aqua;
21 }
22 
23 /*类选择器结合元素选择器*/
24 a.div{
25     color:darkgoldenrod;
26 }
27 
28 .p1{
29     color: darkgoldenrod;
30 }
31 .p2{
32     font-size: 30px;
33 }
34 
35 /*多类选择器*/
36 .p1.p2{
37     font-style:italic;
38 }
39 
40 /*id 选择器*/
41 #mydiv{
42     color: chocolate;
43 }
44 
45 /*后代选择器*/
46 /*p strong{*/
47     /*color: aquamarine;*/
48 /*}*/
49 /*p strong i{*/
50     /*font-style: italic;*/
51 /*}*/
52 
53 /*子元素选择器只能一层*/
54 p>strong{
55     color: fuchsia;
56     font-size: 30px;
57 }
58 
59 /*相邻兄弟选择器*/
60 li+li{
61     font-size: 50px;
62     color:blanchedalmond;
63 }

以上是关于[CSS3] 学习笔记-CSS选择器的主要内容，如果未能解决你的问题，请参考以下文章