CSS总结持续更新。。。。

1、CSS 语法:
    h1 {color:blue; font-size:12px}
    h1 -> 选择器:您需要改变样式的 HTML 元素
    color:blue -> 一条声明(属性和值组成,属性和值用冒号隔开,声明之间用分号隔开)

2、css选择器总结:详细介绍请看https://www.cnblogs.com/z937741304/p/7901086.html
一、选择器
    (1)通配符选择器-> * :匹配页面中所有的元素,一般用来清除浏览器的默认样式,以"*"来确定 
        *{margin:0; padding:0}
    (2)元素选择器:<p> <body> <div>等标签,以标签名来确定p,body,div
        div{width:100px; height:100px;}
    (3)id选择器:具有唯一性,在同一张页面中id名不能重复,以"#" 来确定
        #box{width:100px; height:100px;}
    (4)class选择器:在同一张页面中可以出现多次,以"." 来确定
        .box{width:100px; height:100px;}

二、高级选择器
    (1)E F  后代选择器:匹配到E元素下面的所有的F元素(包括子、孙),空格隔开
        div ul li {width:100px; height:100px; background-color: red;}<br>//匹配到div下面的所有ul,且ul的所有后代li
        <div>
          <ul>
            <li></li>
            <li></li>
            </ul>
        </div>
    (2)E,F  多元素选择器:同时匹配到E元素和F元素,用逗号隔开
        div,#box{width:100px; height:100px; background-color: red;}//同时匹配到下文中的div标签和id为box的p标签
        <div></div>
        <p id="box"></p>
    (3)E>F 子元素选择器:选择到E元素的直接子代F,只选择子代
        div>li{width:100px; height:100px; background-color: red;}
        <div>
            <li>
                div元素的直接子代li
            </li>
            <ul>
            <li>这里的li不会显示红色</li>
            </ul>
        </div> 
    (4)E+F(相邻兄弟选择器):紧接在E元素后面的同级元素F
        div+.box{width:100px; height:100px; background:pink;}
        <div></div>
        <p class="box">紧接在E元素后面的同级元素F,会变粉色</p>
        <p class="box">不会变粉色222</p>
        <div></div>
        <p></p>
        <p class="box">不会变粉色333</p> 

    (5) E[attr]:匹配具有attr属性的E元素
        div[title]{width:100px; height:100px; background:pink;} //匹配到下文中的第一个和第三个div元素 因为他们含有title属性
        <div title="width"></div>
        <div></div>
        <div title="height"></div>
    (6)E[attr="val"]:匹配具有attr属性且值只为val的的E元素
        div[title="height"]{width:100px; height:100px; background:pink;}  //匹配到下文中的第三个div元素
        <div title="width">111</div>
        <div>222</div>
        <div title="height">333</div>
    (7)E[attr~="val"]:匹配属性值为attr,并包含值val的E元素,用于选取属性值中包含指定词汇的元素
        div[class~="love"]{width:100px; height:100px; background:pink;}  //选择到下方第一个和第二个div元素
        <div class="love">111</div>
        <div class="I love you">222</div>
        <div class="lover">333</div>
    (8)E[attr|="val"]:匹配所有属性为attr,且值为val或者以var开头的E元素
        div[class|="c1"]{width:100px; height:100px; background:pink;}//选择到下面当中的第一个和第三个元素
        <div class="c1">111</div>
        <div class="c1cs">222</div>
        <div class="c1-c2">333</div>
    (9)E[attr1][attr2="val"]:匹配所有 具有attr1属性 且有attr2属性,且attr2的值为val的E元素,这个就是写出几个属性选择器,并且都要同时满足他们的条件  
        div[title="width"][class]{width:100px; height:100px; background:pink;}   //选择到下面的第一个div元素
        <div title="width" class="box">111</div>
        <div title="width">222</div>
三、css3新增的选择器
    (1)E1~E2(选择E1后面的所有兄弟E2)
        div~p{width:100px; height:100px; background:pink;} //div后面的三个p元素都选择到了
        <div></div>
        <p></p>
        <p></p>
        <p></p>
    (2)E[attr^="val"] attr属性值以val开头的元素
        div[class^="de"]{width:100px; height:100px; background:pink;}  //选择到了前面三个div元素
        <div class="de1"></div>
        <div class="de"></div>
        <div class="dedkjsfkld"></div>
        <div class="1fde"></div>
    (3)E[attr$="val"] attr属性值以val结束的元素
        div[class$="de"]{width:100px; height:100px; background:pink;} //选择到了前三个
        <div class="de1de"></div>
        <div class="de"></div>
        <div class="dedkjsfklde"></div>
        <div class="1f"></div>
    (4)[attr*="val"] attr属性值包含val的所有元素 
        div[class*="de"]{width:100px; height:100px; background:pink;}  //选择到下面的  1 2 4 都包含de字母
        <div class="de1de"></div>
        <div class="de"></div>
        <div class="dld"></div>
        <div class="1def"></div>

四、有待更新
    a伪类选择器
    (1):link 匹配所有未被点击的链接
        a:link{ color: green; }
    (2):hover 匹配鼠标悬停在其上的元素
      a:hover{ color: gold; }
    (3):active 匹配鼠标按下还没有释放的元素
      a:active{ color: blue; }
    (4):visited 匹配所有已经被点击的链接
        a:visited{ color: red; }  

    a伪元素选择器  

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页