CSS样式优先级顺序及CSS3新属性

css是制作网页时使用的样式表语言，需要对页面进行美化、布局、排版等设计时使用。在CSS中样式的重要性是不同的，如果样式之间发生冲突，就需要决定哪个样式具有更高的优先级。CSS优先级顺序从最高到最低分别是：!important、内联样式、ID、类、属性、伪类和元素选择器。下面我们一一介绍这些优先级。

!important优先级

!important可以添加在CSS规则的属性值之前，表示这个属性值很重要并且不允许被覆盖。这种方式应该避免滥用，因为它会破坏CSS的样式规则。

内联样式优先级

内联样式是指在html标签中使用style属性来直接添加样式属性。这种方式的优先级很高，但是也会破坏HTML和CSS的分离，造成代码维护问题。

ID选择器优先级

ID选择器是指#标识符与一些文本组合在一起，用来标识文档中唯一的元素。ID选择器拥有比类选择器和属性选择器更高的优先级。

类和属性选择器优先级

类和属性选择器是指选择器前面有小数点或方括号的样式，它们适用于多个元素并可以重复使用。类和属性选择器的优先级比元素选择器高。

伪类选择器优先级

伪类选择器是指添加额外的样式到选择器的尾部，用来指定一些状态或者特殊的效果，比如:hover等。伪类选择器的优先级比类和属性选择器低。

元素选择器优先级

元素选择器是指按选择器的元素类型进行匹配的样式，它们的优先级是最低的。如果其他样式与元素选择器发生冲突，其他样式会优先被应用。

CSS3新增属性

除了以上的优先级概念，CSS3还增加了一些新的属性。

border-radius

这个属性可以让元素的边框变圆。可以将元素的一至四个角半径设置为相同或不同的圆角。

box-shadow

这个属性可以为元素添加一些阴影效果，在视觉上可以让元素更有层次感。

transition

这个属性可以让元素在状态改变时，过渡到新的状态，从而形成一些动画效果。在交互设计中使用十分广泛。

flexbox

Flexbox是一个新的布局模式，可以让我们方便地进行文本、图像、导航等元素的布局，可以实现响应式设计。

总结

在设计网页时，样式的优先级是很重要的。我们可以通过使用CSS的优先级概念来解决不同样式之间的冲突。同时，CSS3的新增属性也为我们提供了更多的设计维度，可以让我们更加方便地进行页面设计和开发。