03-CSS中的选择器

高级选择器分为：

  • 后代选择器

  • 子代选择器

  • 并集选择器

  • 交集选择器

 

后代选择器

使用空格表示后代选择器 , 顾名思义  父元素的后代(包括儿子,孙子,重孙子)

中间空格隔开 是后代  

1 .container p{
2     color: red;        
3 }
4 .container .item p{
5     color: yellow;
6 }
格式 :

子代选择器

使用> 表示子代选择器 , 比如  div>p  , 仅仅表示的是当前  div  元素选中的子代(不包含孙子.....) 元素p.

1 .container>p{
2     color: yellowgreen;
3 }
格式:

并集选择器

多个选择器之间使用逗号隔开, 表示选中的页面中的多个标签. 一些共性的元素, 可以使用并集选择器

1 /*并集选择器*/
2 h3,a{
3     color: #008000;
4     text-decoration: none;
5                 
6 }
格式:

比如想百度首页使用并集选择器.

1  body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
2       margin: 0;
3       padding: 0
4    }
5 /*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
例子

交集选择器

使用  .表示交集选择器. 第一个标签必须是标签选择器 , 第二个标签必须是类选择器  

语法:  div.active    比如有一个<h4 class= "active"></h4>   这样的标签

那么 

 1 h4{
 2     width: 100px;
 3     font-size: 14px;
 4 }
 5 .active{
 6     color: red;
 7     text-decoration: underline;
 8 }
 9 /* 交集选择器 */
10 h4.active{
11     background: #00BFFF;
12 }
例如:

他表示两者选中之后元素共有的特性

属性选择器 　　*****

属性选择器, 字面意思就是根据标签中的属性 , 选中当前的标签

语法:

/*根据属性查找*/
 2             /*[for]{
 3                 color: red;
 4             }*/
 5             
 6             /*找到for属性的等于username的元素 字体颜色设为红色*/
 7             /*[for='username']{
 8                 color: yellow;
 9             }*/
10             
11             /*以....开头  ^*/ 
12             /*[for^='user']{
13                 color: #008000;
14             }*/
15             
16             /*以....结尾   $*/
17             /*[for$='vvip']{
18                 color: red;
19             }*/
20             
21             /*包含某元素的标签*/
22             /*[for*="vip"]{
23                 color: #00BFFF;
24             }*/
25             
26             /**/
27             
28             /*指定单词的属性*/
29             label[for~='user1']{
30                 color: red;
31             }
32             
33             input[type='text']{
34                 background: red;
35             }
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
　　　　　　/*举例*/
        form input[type='text']{
            background-color: red;
        }
        form input[type='password']{
            background-color: yellow;
        }
        form #user{
            background-color: green;            
        }
    </style>
</head>
<body>
    /*示例*/
    <form action="">
        <input type="text" id="user">
        <input type="password">
    </form>
</body>
</html>

 

 伪类选择器

伪类选择器一般会用在超链接a标签中 , 使用a标签的伪类选择器, 我们一定要遵循   " 爱恨准则"   LoVe  HAte

 1               /*没有被访问的a标签的样式  link */
 2         .box ul li.item1 a:link{
 3             
 4             color: #666;
 5         }
 6         /*访问过后的a标签的样式     visited */
 7         .box ul li.item2 a:visited{
 8             
 9             color: yellow;
10         }
11         /*鼠标悬停时a标签的样式     hover */
12         .box ul li.item3 a:hover{
13             
14             color: green;
15         }
16         /*鼠标摁住的时候a标签的样式     active */
17         .box ul li.item4 a:active{
18             
19             color: yellowgreen;
20         }

 

 

CSS3 中的选择器nth-child()

 1               /*选中第一个元素*/
 2         div ul li:first-child{
 3             font-size: 20px;
 4             color: red;
 5         }
 6         /*选中最后一个元素*/
 7         div ul li:last-child{
 8             font-size: 20px;
 9             color: yellow;
10         }
11         
12         /*选中当前指定的元素  数值从1开始*/
13         div ul li:nth-child(3){
14             font-size: 30px;
15             color: purple;
16         }
17         
18         /*n表示选中所有,这里面必须是n, 从0开始的  0的时候表示没有选中*/
19         div ul li:nth-child(n){
20             font-size: 40px;
21             color: red;
22         }
23         
24         /*偶数*/
25         div ul li:nth-child(2n){
26             font-size: 50px;
27             color: gold;
28         }
29         /*奇数*/
30         div ul li:nth-child(2n-1){
31             font-size: 50px;
32             color: yellow;
33         }
34         /*隔几换色  隔行换色
35              隔4换色 就是5n+1,隔3换色就是4n+1
36             */
37         
38         div ul li:nth-child(5n+1){
39             font-size: 50px;
40             color: red;
41         }
介绍

 

伪元素选择器

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:'alex';
        }
        
        
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         p:first-letter{
 8             color: red;
 9             font-size: 26px;
10         }
11         /*用伪元素 属性一定是content*/
12 
13         /*伪元素选择器与后面的布局有很大关系*/
14         p:before{
15             content: '$'
16         }
17         p:after{
18             content: '.'
19         }
20         .box2{
21 
22             /*需求：这个盒子一定是块级标签  span==>块 并且不再页面中占位置。未来与布局有很大关系 */
23 
24             /*隐藏元素 不占位置*/
25             /*display: none;*/
26             display: block;
27             
28             /*display: none;*/
29             /*隐藏元素 占位置*/
30             visibility: hidden;
31             height: 0;
32 
33         }
34 
35     </style>
36 </head>
37 <body>
38     <p class="box">
39         <span>alex</span>
40     </p>
41 
42     <span class="box2">alex</span>
43     <div>wusir</div>
44     
45 </body>
46 </html>
例子:

 

posted @ 2018-09-18 17:17  heshun  阅读(147)  评论(0)  编辑  收藏  举报