CSS选择器笔记

Posted on 2019-03-12 21:08  wwoo55  阅读(238)  评论(0)    收藏  举报

选择器      实例　　实例说明　　css版本

一.常用选择器

1. E{...}类型选择器
2. #id选择器
3. class选择器
4. 类组合选择器

 

　　1. E{...}类型选择器

element p 选择所有<p>元素 1 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         h1{
 8             color: red;  /* 将h1作为类型选择 */
 9         }
10     </style>
11 </head>
12 <body>
13     <h1>E{...}类型选择器</h1>
14 </body>
15 </html>
View Code

　　2. #id选择器

#id #firstname 选择所有id="firstname"的元素 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         #i{
 8             color: blue;     /* 注意#号 */
 9         }
10     </style>
11 </head>
12 <body>
13     <p id="i">#id选择器</p>
14 </body>
15 </html>
View Code

 　　3. class选择器

.class .intro 选择所有class="intro"的元素 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .intro{
 8             color: yellow;
 9         }
10         .unintro{
11             color: red;
12         }
13     </style>
14 </head>
15 <body>
16     <h1 class="intro">class选择器</h1>
17     <h1 class="unintro">class选择器</h1>   
18     <h1 class="intro">class选择器</h1>
19     <h1 class="unintro">class选择器</h1>
20     <h1 class="intro">class选择器</h1>
21 </body>
22 </html>
View Code

 　　4. 类组合选择器　　

E.class  　　p.test　　选择所有p标签class为test的元素　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         p.test{
 8             color: yellow;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <p class="test">E.class</p>
15         <p class="test">E.class</p>
16     </div>
17 
18         <p class="sss">E.class</p>
19         <p class="sss">E.class</p>
20 </body>
21 </html>
View Code

 

二.组合选择器

1. E F后代选择器
2. E>F父子选择器
3. E+F相邻兄弟选择器
4.E~F通用兄弟选择器

 

　　1. E F后代选择器

E F 　　div p 　　选择所有div为父级p为子级的元素(不管好多代，，如爷爷和孙子能）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div p{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <p>E F</p>
15         <p>
16             <div>
17                 <p>
18                     <span>
19                         <p>ssss</p>
20                     </span>
21                 </p>
22             </div>
23         </p>
24         <span>
25             <div><p>E F</p></div>
26         </span>
27     </div>
28 </body>
29 </html>
View Code

 　　2.E>F父子选择器　　　

E>F       div>p       选择所有div为父级p为子级的元素(直接子代，如爷爷和孙子不能)

　　　　　　　　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div>p{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>
14         <p>E F</p>
15     </div>
16 </body>
17 </html>
View Code

　　3. E+F相邻兄弟选择器

E+F   div+p　　同一父级选择 <div> 元素之后紧跟的每个 <p> 元素的元素

element+element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div+p{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>E F</div>
14     <p>E F</p>
15     <p>E F</p>
16 </body>
17 </html>
View Code

　　4.E~F通用兄弟选择器

E~F　　div~p　　同一父级选择 <div> 元素之后的每个 <p> 元素的元素（不需要紧跟，且可选择多个p元素）

element1~element2 选择器 element1 之后出现的所有 element2。

两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         div~p{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div>E F</div>
14     <p>E F</p>
15     <span>E F</span>
16     <p>E F</p
17 </body>
18 </html>
View Code

 

三.链接伪类选择器

1.E:link
2.E:visited
3.E:hover
4.E:active

如果多选，尊从爱恨原则（LoVe  HAte）顺序书写

　　a:link  选择所有未被访问的链接。

　　a:visted  选择所有已被访问的链接。

　　a:hover   选择鼠标指针位于其上的链接。　　

　　a:active   选择活动链接。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         a:link{
 8             color: red;
 9         }
10         a:visited{
11             color: blue;
12         }
13         a:hover{
14             color: yellow;
15         }
16         a:active{
17             color: brown;
18         }
19     </style>
20 </head>
21 <body>
22     <a href="http://www.baidu.com" target="_blank">love hate</a>
23     <a href="http://www.baidu.com" target="_blank">love hate</a>
24     <a href="http://www.baidu.com" target="_blank">love hate</a>
25     <a href="http://www.baidu.com" target="_blank">love hate</a>
26     i
27 </body>
28 </html>

 

　　　

更多自己对照 http://www.w3school.com.cn/cssref/css_selectors.asp