CSS选择器优先级详细介绍

名站导航为爱好css的朋友们提供相关的知识。

CSS教程3动画之3D旋转书本效果
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS教程3的一些变换即可实现更好的展示效果，简洁而实用。书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。所以要构造一个3D书本展示，问题就被分解为构造一个立方体旋转图片背景。

此篇文章具体介绍如下

本文为大家分享的是CSS教程选择器优先级相关资料介绍，供大家参考，具体内容如下

1.类的覆盖顺序和应用的时候引用的顺序没关系，覆盖顺序取决于类定义的顺序

例如：

.a{   
    color:red  
}   
.b{   
    color:green  
}

由于b晚于a定义，所以b覆盖a，反之则a覆盖b

2.类选择器优先级大于标签选择器

例如：

div{   
    color:red  
}   
.div{   
    color:green  
}

.div将覆盖div

3.类选择器优先级等于纯属性选择器，谁后定义谁优先级高。

例如：

[data-name='div']{   
     color: red    
 }   
 .a{    
     color:blue    
 }

.a将覆盖[data-name='div']，反之[data-name='div']覆盖.a

4.类选择器优先级小于标签属性组合选择器。

例如：

div[data-name='div']{   
     color: red    
 }   
 .a{    
     color:blue    
 }

5.类选择器优先级小于id选择器。

例如：

.a{   
     color:blue    
 }    
 #div{    
     color: red    
 }

.a将被#div覆盖

6.标签属性组合选择器优先级小于id选择器。

例如：

[data-name='div']{    
     color:blue  
 }   
 #div{    
     color: red  
}

#div将会覆盖[data-name='div']

7.标签选择器优先级小于id选择器。

例如：

div{    
     color:blue  
 }    
 #div{   
     color: red    
 }

#div将会覆盖div

8.标签选择器优先级小于纯属性选择器。

例如：

div{    
     color:blue    
 }   
[data-name='div']{    
     color: red    
 }

div将会被 [data-name='div']覆盖

CSS教程3绘制三角形实例介绍
利用CSS教程的border以及它的属性值transparent来实现三角形,其中最主要的是要明白由于div的高度跟宽度都为0，margin，padding也为0，所以元素框的大小就是他的border的叠加，由于相邻boder会重叠，故存在内容宽高时其实任意一边存在的border都是梯形的，当div内容宽高为0时，border就表现为三角形，将四个border的颜色设置为transparent表示边框透明，而将右边框颜色再设置为红色就发现三角形出现了，其实这个三角形是右边框。

关于css的相关的知识就说到这里希望能够可以帮助更多的朋友们。,css,选择器,优先级