您的位置：首页 > Web前端 > CSS

CSS3属性选择器

2017-05-13 21:23 351 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* img[alt="234"]{
margin: 20px;
}*/
/*!*img[alt^="2"]{  以2开头的img
margin: 20px;
}*/
/*img[alt$="4"]{!*以4结尾的img*!
margin: 20px;
}*/
img[alt~="1"]{/*包含1且有空格*/
margin: 40px;
}
/* img[alt*="3"]{!*包含3的所有img*!
margin: 20px;
}*/
img[alt|="1"]{/*包含1且1后有-分隔符*/
margin: 50px;
}
.divWidth{
width: 200px;
}
.divHeight{
height: 200px;
}
.divBg{
background-color: red;
}
div[class="a"]{
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
<title>CSS3属性选择器</title>
</head>
<body>
<img src="../../img/coffee.jpg" alt="123">
<img src="../../img/coffee.jpg" alt="1 23">
<img src="../../img/coffee.jpg" alt="1-23">
<img src="../../img/coffee.jpg" alt="234">
<div class="divWidth divHeight divBg">

</div>

<div class="a">

</div>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航