css选择器总结

*{margin:0; padding:0}

div{width:100px; height:100px;}

.box{width:100px; height:100px;}

<div class="box"></div>
<p class="box"></p>

#box{width:100px; height:100px;}

<div id="box"></div>

div ul li {width:100px; height:100px;}
//匹配到div下面的所有ul，且ul的所有后代li

<div>
　　<ul>
　　　　<li></li>
　　　　<li></li>
    </ul>
</div>   

div,#box{width:100px; height:100px; background:#000;}//同时匹配到下文中的div标签和id为box的p标签

<div></div>
<p id="box"></p>

ul>li{width:100px; height:100px;}

<ul>
　　<li>
 　</li>
</ul>

div+.box{width:100px; height:100px; background:pink;}//这个只能选择到下面第二行的那个p元素  最后一个不满足紧接在div元素后面这个条件

　　<div></div>
    <p class="box"></p> 
    <p class="box"></p>
    <div></div>
    <p></p>
    <p class="box"></p>

div p + p{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}
　　//这个可以选择到下面除了第一个p元素外其他所有的元素。
　　<div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

div[title]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}　　//匹配到下文中的第一个和第三个div元素 因为他们含有title属性
    <div title="width"></div>
    <div></div>
    <div title="height"></div>

div[title="height"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}  //匹配到下文中的第三个div元素
    <div title="width"></div>
    <div></div>
    <div title="height"></div>

div[class~="c1"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
} //选择到下方第一个和第二个div元素

　　 <div class="c1"></div>
    <div class="c1 c2"></div>
    <div class="c2c1"></div>

div[class|="c1"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}//选择到下面当中的第一个和第三个元素

　　 <div class="c1"></div>
    <div class="c1cs"></div>
    <div class="c1-c2"></div>

div[title="width"][class]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}    //选择到下面的第一个div元素

    <div title="width" class="box"></div>
    <div title="width"></div>

1、 :link	匹配所有未被点击的链接
　　a:link{ color: green; }
2、：hover	匹配鼠标悬停在其上的元素
　　a:hover{ color: gold; }
3、：active	匹配鼠标按下还没有释放的元素
　　a:active{ color: blue; }
4、：visited	匹配所有已经被点击的链接
a:visited{ color: red; }

.box{
    width:100px;
    height: 100px;
    color:#fff;
    background: #000;
}
.box:hover p{
　　color:red;
}//鼠标移动div上，p字体的颜色改变

　　<div class="box">
        <p>我的字体</p>
    </div>

div:before{
    content: "before插入的元素";
}
//在div所有元素的最前面插入这个

div:after{content:"";}

<div></div>

 div~p{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//div后面的三个p元素都选择到了
    <div></div>
    <p></p>
    <p></p>
    <p></p> 

div[class^="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}　　//选择到了前面三个div元素
    <div class="de1"></div>
    <div class="de"></div>
    <div class="dedkjsfkld"></div>
    <div class="1fde"></div>

div[class$="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//选择到了前三个
    <div class="de1de"></div>
    <div class="de"></div>
    <div class="dedkjsfklde"></div>
    <div class="1f"></div>

div[class*="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//选择到下面的  1 2 4 都包含de字母
    <div class="de1de"></div>
    <div class="de"></div>
    <div class="dld"></div>
    <div class="1def"></div>

p:first-of-type{
    width:100px;
    height:100px;
    background: #000;
}//父级下面所有p元素的第一个 

    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

p:only-child{
    width:100px;
    height: 100px;
    background: #000;
}
　　//下面的这个只能选择到第一个div当中的p

    <div>
        <p></p>
    </div>
    <div>
        <p></p>
        <span></span>
    </div>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

p:not(.c1){
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}//下面的元素当中除了第一个class为c1的p元素其他的都被选中了。
　　
    <div>
       <p class="c1"></p>
       <p class="c2"></p>
       <p id="box"></p>
       <p></p>
       <p></p>
   </div> 

p:empty{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}//会选择到下面的第二个p元素，因为他没有内容

    <div>
        <p>11</p>
        <p></p>
        <p>11</p>
        <p>11</p>
        <p>1</p>
    </div>

p:target{
    width:100px;
    height: 100px;
    margin-top: 2px;
    color:#fff;
    background: #000;
}  //点击a的内容，p标签的样式会被选中激活

    <a href="#a1">点我</a>
    <div></div>
    <p id="a1">p标签的内容</p>

p::selection{
    width:100px;
    height: 100px;
    margin-top: 2px;
    color:#fff;
    background: #000;
}

    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>

input:enabled{
    background:yellow;
}
input:disabled{
    background:red;
}
　　//一般可以写内容的都是可以被操作的，加上disabled的属性和disabled的值的是不可以被操作的
    <input type="text" value="">
    <input type="text">
    <input type="text" disabled="diabled">

input:checked{
    width:40px;
    height:40px;
}//就是框被打上对勾，被选中的元素会被选中
　　　
    <input type="checkbox" checked="" value="">足球
    <input type="checkbox" value="">篮球