css基础及选择器常用属性.md

/*不推荐大家使用，不利与优化*/
@import url("./1.css");

属性选择器讲解
img[title=”1dasdadad”]{border:1px solid red;}
div[class=”sulia”]{color:red;}
div[class~=”sulia”]{color:#abcdef;}
div[class|=”job-kimi”]{color:#996;}
div[class=”sulia”][title]{color:black;}

<img src="" title="1dasdadad">
<img src="" title="1dasdadad">
<img src="" title="job">

<div class="job">adada</div>
<div class="sulia" title="a">adada</div>
<div class="job sulia" >asdad</div>
<div class="job-kimi" >4132132132</div>

<div class="pp">aaaaaaa</div>
<div class="ss">bbbbbbbbb</div>
<div class="pop">cccccccc</div>
<div class="poop">ddddddddd</div>

---

    div[class^="p"]{color:red;}
    div[class$="o"]{color:green;}
    div[class*="op"]{color:blue;}

---

通用基础选择器
a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var{margin:0;padding:0}

伪类选择器
a:first-child{color:green;}

    a:visited{color:green;}
    a:hover{color:red;}

伪元素选择器
p:first-line{color:#452;}
div:before{content:”…………………”; }
div:after{content:”爱上你了”;}

组合选择器
.a,.b{color:#f96;}
div.a{color:red;}
p.d>a{color:#666;}
p.d a{ color:red;}
div + div{ color:green;}

    div~.pp{
        color:#abcd12;
    }

用户页面有关的伪类
input[type=”text”]:enabled{background:red;}
input[type=”text”]:disabled{background:green;}
input:checked{width:100px;}

    ::selection{
        color:#abcdef;
    }
*  *  *
/*-moz-Gecko引擎的浏览器（Firefox）*/
-webkit-(chrome、safari)
-o-
-ms- ie
transition:
-webkit-transition:
-moz-transition:
-o-transition:

结构性|反选伪类
:root{ background:#abcdef;};

p:nth-child(3){color:red;}

div a:nth-child(2){color:green;}
div a:nth-last-child(2){color:blue;}

div a:nth-of-type(odd){color:#666;}

div a:last-child{color:#abcdef;}

div p:nth-child(3n+1){color:#960;}

:not(p){color:orange;};

:target{
    color:red;
};