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

css笔记06：层叠样式选择器

2015-06-30 11:01 786 查看

1.

(1)HTML文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择器</title>
 6 <link rel="stylesheet" type="text/css" href="style.css"/>
 </head>

<body>
<p> Specificity is determined  by now specific the selector is.
<span id="specific"> A specific  selector wins</span>
over a <span> more general one </span>.
</p>

<p>
Order isn't important until there are one or more elememts of the same specificty referring to the same elememt.In
which case,<span> the last one wins</span>
</p>

</body>
</html>

（2）CSS文件

@charset "utf-8";
/* CSS Document */

body {
font:Verdana, Geneva, sans-serif;
}

span#specific {
background:pink;
}

span {
background:red;
}

span {
background:yellow;
}

这里CSS文件中有两个span{}，这两个选择器针对性都是1，因此后面的那个优先适用，这导致后面连个<span>元素都是黄色背景

效果图：

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

标签：

相关文章推荐

新的分享

章节导航