11、css三大特性

谷歌 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>