码迷,mamicode.com
首页 > 其他好文 > 详细

h5-4

时间:2020-03-07 19:05:42      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:mon   inf   item   white   space   ima   ie6   元素   css   

通配选择器   *表示所有的标签

1     <div>div</div>
2     <p>p</p>
3     <h1>h1</h1>
4     <ul>
5         <li>item</li>
6         <li>item</li>
7         <li>item</li>
8     </ul>
1     <style>
2         /* 通配符选择器效率低 所以很多工程上很少使用 */
3         *{
4             color:red;
5         }
6     </style>

技术图片

 高级选择器

  后代选择器  div p 表示div中所有后代p

 1     <ul>
 2         <li><p>111</p></li>
 3         <li>222</li>
 4         <li>333</li>
 5         <li>444</li>
 6     </ul>
 7     <div class="box">
 8         <ul>
 9             <li>item</li>
10         </ul>
11     </div>
 1     <style>
 2         /* ul li{
 3              空格表示后代 
 4             font-size: 30px;
 5             color:green;    字体颜色
 6         } */
 7         .box li{
 8             background-color: skyblue;
 9         }
10     </style>

技术图片

 

 

 

  交集选择器  div.box{ }  div.box li{ }  p.p1#p1  (ie6不支持连续交集写法)

1     <div class="box">
2         <ul>
3             <li>item</li>
4         </ul>
5     </div>
6 
7     <div>这是第二个div</div>
1 div.box{
2             background-color: red;
3         }

技术图片

 

 并集选择器

  div,p,h1,li {

      color:red;

      }

 

css两性-继承性与层叠性

继承性  css中有一部分属性可以被继承,比如文字和文本的属性color,font-size,font-family,font-*,text-。即便标签本身不设置 也能被加载

1     <div class="box">
2         <ul>
3             <li>item1</li>
4             <li>item2</li>
5             <li>item3</li>
6         </ul>
7     </div>
 1     <style>
 2         body{
 3             font-size:16px;
 4         }
 5         div.box{
 6             background-color: #ccc;
 7             font-size: 30px;
 8             font-family: "微软雅黑";
 9             color:red;
10             height:300px;
11         }
12     </style>

技术图片

 

 

 层叠性

1     <div id="box1" class="box1">
2         <div id="box2" class="box2">
3             <div id="box3" class="box3">
4                 <p>我的颜色到底听谁的?</p>
5             </div>
6         </div>
7     </div>
 1      <style>
 2         /* 以下三种选择器都可以直接选择到p,此时比较权重
 3             id选择器个数    class选择器个数     标签选择器个数
 4                 1               2                   1
 5                 1               2                   3
 6                 1               1                   2   
 7         */
 8         #box1 .box2 .box3 p{
 9             color:red;
10         }
11         #box1 div.box2 div.box3 p{
12             color:green;
13             /* 权重最高 */
14         }
15         .box1 #box2 div p{
16             color:blue;
17         }
18     </style>

技术图片

 

2、

1     <div id="box1" class="box1">
2         <div id="box2" class="box2">
3             <div id="box3" class="box3">
4                 <p>我的颜色到底听谁的?</p>
5             </div>
6         </div>
7     </div>
<style>
        /* 以下三种选择器都可以直接选择到p,此时比较权重
            id选择器个数    class选择器个数     标签选择器个数
                1               2                   1
                1               2                   1
                1               2                   1
            以上权重相同,谁写在最后听谁的  
        */
        .box1 #box2 .box3 p{
            color:red;
        }
        #box1 .box2 .box3 p{
            color:green;
        }
        .box1 .box2 #box3 p{
            color:blue;
        }
    </style>

技术图片

 

 3、

<style>
        /* 
            三种选择器都没有直接选择元素 通过继承让p拥有属性,此时看谁描述的近就听谁的
        */
        #box1 {
            color:red;
        }
        .box1 .box2 .box3 {
            color:blue;
        }
        .box1 #box2 {
            color:green;
        }
    </style>

技术图片

 

4、

 /* 
            三种选择器都没有直接选择元素 通过继承让p拥有属性,此时看谁描述的近,就听谁的,假如描述的一样近,
            此时再比较权重,权重谁最高就听谁的,加入权重一样,以代码的顺序为准,听后面的
             id选择器个数    class选择器个数     标签选择器个数
                  2                 1               0
                  0                 3               0
                  2                 1               0
        */
        #box1 .box2 #box3 {
            color:red;
        }
        .box1 .box2 .box3 {
            color:blue;
        }
        .box1 #box2 #box3 {
            color:green;
        }

技术图片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<div id="box1" class="box1">
        <div id="box2" class="box2">
            <div id="box3" class="box3">
                <p>我的颜色到底听谁的?</p>
            </div>
        </div>
    </div>

h5-4

标签:mon   inf   item   white   space   ima   ie6   元素   css   

原文地址:https://www.cnblogs.com/qianfur/p/12284933.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!