谷歌 F12
elements 可以查看页面的所有标签元素
方框+箭头 点击箭头 选择页面的某个区域 就可以知道该区域【标签】在页面中的位置
pc+手机 可查看pc端和 移动端 不同的显示效果
右边的style 1 查看页面中设置的css样式
2 灰色的部分为系统设置的css样式
3.白色的部分为开发者设置的css样式 可以查看该样式在哪个文件 第几行
4.为了方便开发 调试 白色的部分可以直接修改 但是不能被保存
继承性
作用:给父元素设置的一些属性,子元素也可以使用
注意:1.并不是所有的属性都可以继承,
只有以 color/font-/text-/line- 开头的属性才可以被继承
不能被继承的 比如:背景....
2.在css中继承不仅仅是儿子可以继承,只要是后代都可以继承
3.css继承的特殊性
1.a标签的文字颜色和下划线是不能被继承的
2.
h标签的字体大小不能被继承
应用场景:一般用于设置网页的一些共性信息 例如网页的颜色/字体/大小.....
body{.........} 【jd.com 可以验证...】
.cla{
font-size: 30px;
}
<div class="cla">
<h2>我是h2标签</h2>
<h2>我是h2标签</h2>
<p>我是一个p标签</p>
</div>
层叠性
作用:css处理冲突的一种能力
注意:只层叠性有在多个选择器选中同一个标签,然后又设置了相同的属性/不同的值 才会发生层叠
#pp{
color: red;
}
p{
color:#666;
}
<p id="pp">我是一个p标签</p>
优先级
作用:当多个选择器选择同一个标签,并给同一个标签设置相同的属性/不同的值 如何层叠由优先级来决定
优先级判断的三种方式:
1.间接选中(间接选中就是指继承)
如果是间接选中 那么就是谁离目标标签比较近 就听谁的
2.相同选择器 直接选中
如果是直接选中,并且都是同一类选择器,谁写在后面听谁的
3.不同的选择器直接选中
id>class>标签>*通配符>继承>浏览器默认的
.cla{
color:blue;
}
#ids{
color:yellow;
}
p{
color:red;
}
{
color:#666;
}
body{
color: green;
}
<p id="ids" class="cla">我是一个被直接选择的P</p>
important
作用:用于提高某个直接选中的标签当中的某个属性,可以将其优先级提到最高
注意:1.important只能用于直接选中 不能用于间接选中
2.!important只能提示被指定的属性的优先级 其他的属性的优先级不能被提升
3.!important必须写在属性值得后面 前面必须加 !
权重问题
作用:当多个选择器混合在一起使用时,我们可以通过计算权重来判断优先级
如何计算权重:
首先计算当前有多少个id id多的组合选择器优先级最高
当id一样时, 计算class class多的组合选择器优先级最高
当class一样时 计算标签 标签多的组合选择器优先级最高
当标签选择器相同时 写在后面的组合选择器优先级最高
div p{
color:red;
}
div #ids2{
color:blue;
}
/**/
/*div .cla2{*/
/*color:green;*/
/*}*/
/*#ids1 p{*/
/*color: pink;*/
/*}*/
/*#ids1 #ids2{*/
/*color: #000;*/
/*}*/
/*#ids1 .cla2{*/
/*color:#666;*/
/*}*/
<div id="ids1" class="cla1">
<ul>
<li>
<p id="ids2" class="cla2">我是P标签</p>
</li>
</ul>
</div>