选择器的优先级
在一样的标签下,根据代码的上下解析,谁在最后谁显示。
<style>
h2 {color:red;}
h2 {color:yellow;}
</style>
<body>
<h2>百度</h2>
</body>
最后显示百度字体颜色为黄色
在组合选择器中,ID>class>标签,浏览器会根据他们的数量来比较大小,可以把它比成数字[id的数量.class的数量.标签的数量]谁大谁显示。不管同级有多少个,都比不过比它大的一级
<style>
body h2 {color:red;}
h2 {color:yellow;}
</style>
<body>
<h2 class="on" id="foo">百度</h2>
</body>
解析:最终h2会显示红色,因为第一个有两个标签,所以不会按照先后顺序显示
<style>
body h2 {color:red;}
h2.on {color:yellow;}
</style>
<body>
<h2 class="on" id="foo">百度</h2>
</body>
解析:最终h2会显示为黄色,因为第二个有class选择器[0.1.0],比第一个[0.0.2]大
<style>
body h2 {color:red;}
:root h2 {color:yellow;}
</style>
<body>
<h2 class="on" id="foo">百度</h2>
</body>
解析:最终h2会显示为黄色,因为第二个的伪类选择器也是类相当于class[0.1.0],比第一个[0.0.2]大
<style>
#foo body h2 {color:red;}
h2.on {color:yellow;}
</style>
<body>
<h2 class="on" id="foo">百度</h2>
</body>
解析:最终h2是红色,因为第一个有id选择器[1.0.2],比第二个[0.1.1]大
实例演示字体与字体图标
<style>
.font {
font: italic lighter 36px sans-serif;
}
</style>
<script src="font/iconfont.js"></script>
<style>
.icon {
width: 10em;
height: 10em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<h2 class="font">PHP中文网真是个好地方</h2>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-1"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-2"></use>
</svg>
</body>
盒模型属性简写
边框简写,直接用border来设置四周的边框,里面的值分别是尺寸、颜色和样式、缺一不可。
<style>
.box{border: 10px red solid;}
</style>
内边距简写
<style>
四个值,里面的值分别是上、右、下、左
.box{padding:5px 10px 15px 20px;}
三个值,分别是上、左右、下
.box{padding:5px 15px 20px;}
两个值,分别是上下、左右、下
.box{padding:15px 20px;}
</style>
外边距简写
<style>
四个值,里面的值分别是上、右、下、左
.box{margin:5px 10px 15px 20px;}
三个值,分别是上、左右、下
.box{margin:5px 15px 20px;}
两个值,分别是上下、左右、下
.box{margin:15px 20px;}
</style>