着你追
2015-07-16 18:36
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bootstrap强调内容</title>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"></head>
<body>
<div class="container">
<div class="jumbotron">
<p class="lead">这部分内容需要特别的强调,我和别人长得不一样</p>
<p>这部分内容需要特别的强调,我和别人长得不一样</p>
<!--在bootstrap-3.3.5好像lead没用了-->
</div>
</div>
</body>
</html>
.jumbotron p{ margin-bottom:15px;font-size:21px;font-weight:200}/* 权值 = 10+1=11 */
.lead{ margin-bottom:20px;font-size:16px;font-weight:200;line-height:1.4}/* 权值 = 10 */
@media (min-width:768px){.lead{font-size:21px}
选择器的优先权
解释:
1. 内联样式表的权值最高 1000;
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1
CSS 优先级法则:
A 选择器都有一个权值,权值越大越优先;
B 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D 继承的CSS 样式不如后来指定的CSS 样式;
E 在同一组属性设置中标有“!important”规则的优先级最大;
所以lead不起作用了(.jumbotron p权值 = 11 > .lead 权值 = 10 )
此问题解决了,,,,太逗比了,去掉div那些东西lead还是起到作用的,,,,麻烦大家了
玩转Bootstrap(基础)
314544 学习 · 2275 问题
相似问题