忘记密码?

一键登录

草根吧源码论坛

css样式引入优先级?(Discuz经验)

查看: 159|回复: 0

[经验] css样式引入优先级?(Discuz经验)

[复制链接]

1717

主题

2203

热度

608

贡献

民审

Rank: 8Rank: 8

发表于 2016-7-5 13:25:21 | 显示全部楼层 |阅读模式 | 百度  360  谷歌 
分享到:
css中的优先级讲的有
  1.选择器的优先级。
  2.样式引入的优先级。
今天要研究的是样式引入的优先级。网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何。
  四种样式的优先级别是:行内样式最高、
      ?优先级?  内嵌样式>链接样式>导入样式?
在这四种的优先中,行内样式最高(内嵌样式),大家都是认可的。但剩下的3中就会是我们想的那样吗?
测试代码如下。很简单,先测试内联样式 。一段文本,给设置个color:red;红色。


<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>    p{color:red;}</style></head><body>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p></body></html>



 浏览器显示如下。没什么问题。草根吧 css样式引入优先级?(Discuz经验) content,优先级,color,如何,网上 PHP技术区 981823-20160703151425124-1562540258
在接着来看看,用link的方式引入一个外部样式。
  引入方式如下。

<link rel="stylesheet" href="Noname1.css"><style>    p{    color:red;}</style>

  外部样式看下列代码:
p{    color:blue;}

浏览器显示如下:为什么什么显示的不是蓝色?
草根吧 css样式引入优先级?(Discuz经验) content,优先级,color,如何,网上 PHP技术区 981823-20160703151730702-1846315671

显示还是红色,难道就是  内联样式>连接样式?接下来调换了调用的下位置。代码如下。
<style>    p{    color:red;}</style><link rel="stylesheet" href="Noname1.css">

浏览器显示如下。
草根吧 css样式引入优先级?(Discuz经验) content,优先级,color,如何,网上 PHP技术区 981823-20160703152015921-3935400

这样浏览器显示的却是蓝色,这时候我们就能看出个大概了。
优先就是个顺序解析问题,谁的引入样式在前面,后面的样式就会被覆盖前面的样式。也就是说,哪个样式离标签越近,哪个样式的优先就越高。
然后接下要解决的就是@import的问题了。
解释是这样:

@import既可以为页面引入外部样式表,也可以在一个样式表中引入另一个样式表。

例如:  

  1.@import url("style.css");一个样式表中引入另一个样式表。

  2.<style type="text/css">

@import "mytest/div+css/mytest.css";

</style>
 也就是用style,或者是使用外部样式文件再去引入多个样式文件。
第一种中,直接在style标签内容中使用。@import。
另开一个css样式文件,代码如下:

p{    color:yellow;}

html代码如下:

<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>    @import "Noname2.css";</style></head><body>    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis natus dolorum iste quaerat alias tenetur fugit esse ratione officiis blanditiis similique qui pariatur tempore maxime ut. Accusamus dolor aut quod?</p></body></html>

浏览器显示没有问题:
草根吧 css样式引入优先级?(Discuz经验) content,优先级,color,如何,网上 PHP技术区 981823-20160703153203031-1094093610

接着使用在使用link标签去测试优先级。
先放在前面。引入代码如下:

<link rel="stylesheet" href="Noname1.css"><style>    @import "Noname2.css";</style>
浏览器显示看到的是还是上面讲到,谁越靠近p标签,就会采用谁的样式。有个词叫上面来着。近水楼台先得月。。。
在看看放在后面会如何。
<style>    @import "Noname2.css";</style><link rel="stylesheet" href="Noname1.css">
浏览器显示如下。
草根吧 css样式引入优先级?(Discuz经验) content,优先级,color,如何,网上 PHP技术区 981823-20160703153747359-931050780
没有什么问题。还是一样,近水楼台先得月。。
四种样式的优先级别是:
   行内样式最高、
   内嵌样式  与  链接样式(哪个更靠近标签,哪个样式的优先级就越高)
     导入样式?
  @import的优先级问题就请等下篇。

帖子地址: 

本文来源于草根吧源码论坛 www.caogen8.co,欢迎大家下载。
如果您没有贡献需要充值,可以直接在线充值,点击充值
如果你需要加入本站赞助VIP会员,可以直接在线开通,点击开通
如果找不到您要的资源,请搜索一下,点击搜索
回复

举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆 用百度帐号登录 一键登录:

本版积分规则

收藏帖子 返回列表 搜索
快速回复 返回顶部 返回列表