html中基本选择器的优先级,css入门、css选择器的优先级

css入门、css选择器的优先级

更新时间：2014-10-27  作者：https://www.exp99.com  来源：久久经验网  浏览：  所属分类：HTML+CSS

摘要：理解css选择器的优先级很重要，在以后前端的实际项目中可以体现出来

从今天起，久久经验网将列举初级前端知识，欢迎准备入门的前端爱好者加入！

css基础入门(精简)

css(指层叠样式表 (Cascading Style Sheets))

css优势：

改变以往table布局的时代！真正实现了网页内容和表现分离的目的！

css语法：

selector {property: value;  property2:value2}

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明；

每条声明由一个属性和一个值组成；

每个属性有一个值，属性和值被冒号分开，如下图：

css选择器示意图

说明：本文仅讲解要点，关于css更详细的讲解请参考相关资料！

-------------------------------------------------------------------------------

我们现在看个关于css选择器的优先级例子：

假设html+css：

久久经验网

div a{color:red}

.link{color:blue}

此时运行静态html页面，渲染效果：蓝色的链接

咦？为什么不是红色的呢？难道是.link和div a样式定义的先后顺序问题？NO~NO~NO，请继续往下看。

css常规选择器的优先级：

标签选择器的优先级为1、类选择器的优先级为10、ID选择器的优先级为100

那么刚才的选择器优先级对应如下：

div a = 1+1 = 2

.link = 10

因此，会优先显示.link的类选择器样式

欢迎有志从事web前端工作的朋友，加web技术QQ群：239274519

Tag：