您的位置：首页 > Web前端 > CSS

关于css中的样式表冲突

2015-10-10 10:58 537 查看

代码示例如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel = "stylesheet" type = "text/css" href = "b.css"></link>

<link rel = "stylesheet" type = "text/css" href = "d.css"></link>
<link rel = "stylesheet" type = "text/css" href = "c.css"></link>
<title>样式表的冲突的解决</title>
<style type="text/css">
/*
1.行级 > 内部 > 外部
2.id > 类选择器 > 标签选择器
外部样式表中俄id选择器 > 内部样式表的标签选择器

原则： 就近原则  (当有多个外部选择器时，
对于外部选择器，就近是指引入的哪个靠后，
当有多个类选择器时，对于类选择器，是指定义的哪个靠后)

*/
div{
color:blue ;
}

.two{
border:3px dotted green ;
color:red ;
}
.one{
color:yellow ;
}

#d{
color:green ;
}

p{
color:red ;
}
</style>
</head>
<body>
<div class = "one" id = "d">大家好</div>

<P id = "p" style = "color:blue;">哈哈哈</p>

<h1>哈哈哈</h1>

<h2 class = "two one" >哈哈哈</h2>
</body>
</html>

b.css的代码如下：

div{
color:red;
}

#p{
color:yellow;
}

c.css的代码如下：

h1{
color:red ;
}

d.css的代码示例如下：

h1{
color:yellow;
}

运行结果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航