选择器组合实现优先级提权方式
选择器类型对优先级的影响 ?
答:id选择器>class选择器>tag选择器
实际工作中,应该用一系列的选择器组合来灵活的设置优先级
如果都是标签选择器,为什么后面的无效,一定有一个规则?
body h2{
color:skyblue;
}
h2{
color:red;
}
有一个计算公式[id选择器数量,class选择器数量,tag选择器数量]
数量越多,权重越大,优先级越高!
body h2:[id=0,class=0,tag=2];有body和h2两个标签
h2[id=0,class=0,tag=1];有h2一个标签
第一个h2比第二个h2标签数量多所以权重大,优先级高
tag选择器优先级进位是class选择器,class选择器进位是id选择器
.on h2[id=0,class=1,tag=1];
就比body h2优先级高
<body>
<h2 class="on off" id="foo">
hello
</h2>
</body>
字体和字体图标
<style>
/*字体属性*/
.title{
/*字体*/
font-family:sans-serif;
/* 大小 */
font-size: 24px;
/* 样式 */
font-style: italic;
/* 粗细 */
font-weight: lighter;
/*可以简写为*/
font:italic lighter 36px sans-serif;
}
body{
/* 颜色 */
background-color: cornsilk;
/* 图片 */
background-image: url(https://www.baidu.com/1.jpg);
/* 重复 */
background-repeat: no-repeat;
/* 大小 */
background-size: 300px;
/* 位置 */
background-position: 100px 200px;
/* 简写 */
background: no-repeat red;
}
</style>
<body>
<h2 class="title">
php中文网
</h2>
</body>
盒模型常用属性的缩写
盒模型是div,可以设置边框,内边距,外边距
div边框设置
border-top指的是上边框
border-bottom指的是下边框
border-left指的是左边框
border-right指的是右边框
可以单独设置也可以缩写为
border:1px solid red;指的是宽度,样式,颜色
padding:上 右 下 左;内边距
当左右相等,而上下不相等,用三值语法
padding:上 右左 下;
当左右相等,上下相等,用二值语法
padding:上下 左右;
margin是外边距 跟padding内边距用法一样
总结:
padding和margin不管是三值语法还是二值语法 第二个值永远是值右左的值!