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

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

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

css基础入门(精简)

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

css优势

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

css语法

selector {property: value;  property2:value2}

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

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

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

css选择器示意图
css选择器示意图

说明:本文仅讲解要点,关于css更详细的讲解请参考相关资料!

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

 

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

假设html+css:

  1. <div><a href="http://www.exp99.com" class="link">久久经验网</a></div> 
  1. div a{color:red
  2. .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

 

相关经验

导读书签
书签初始化中…