麻烦老师解答 谢谢
来源：2-18 继承性
夜的解忧铺
2021-06-21 07:03:57
1
1）在设置.box时1 list-开头的为什么不生效，是因为只能设置在列表 才会生效吗 还是.box1不继承list-style属性？
.box1{
font-size: 20px;
font-weight: bold;
font-style:italic;
color: #00f;
list-style: none;
text-decoration: underline;
line-height: 1.5;
text-align: center;
font-family: "宋体";
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
</div>
2)还有被划掉的属性 是为什么？
2
1）继承性：当设置样式冲突时 都描述到#box3 那么#box3的所有后代是都是通过权重大小来计算的吗？又或者说都作用于同一个标签时会用到权重大小来计算
.box1 #box3{
color: red;
}
.box1 #box2 #box3 {
color: royalblue;
}
2）当样式有冲突时，又作用于不同的标签，这时就要考虑到继承性
有两种 一种是直接作用到对应的标签上 而其他得描述继承权重为0，那作用在对应标签上得权重是100吗？ 另一种是描述到离得近得标签上
.box1 #box2 #box3{---这个的意思是指.box1 继承给#box2 再继承给#box3 以及#box3的所有后代吗？
color: red;
}
.box1 #box2 {
color: royalblue;
}
3
<p style="color: green;">我是文字</p>
行内式的，内联式权重又是多少？同时书写这两个样式，如果样式不冲突是不是会叠加，如果有冲突，就会听行内式的
<style>
.box1 #box3{
color: red;
}
.box1 #box2 #box3 {
color: royalblue;
}
</style>
</head>
<body>
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p style="color: green;">我是文字</p>
</div>
</div>
</div>
1回答
-
同学你好，解答如下：
1、
1）因为ul标签是有默认的list-style样式，ul会优先使用自己默认的list-style样式，所以给.box设置 list-style: none;样式，并不能清除小圆点。
如果想清除的话，可以给ul标签设置，例如：
也可以让ul使用.box的list-style: none;样式，如下：
2）inherited from ul翻译成中文是 继承自ul，所以下方是li继承了ul的list-style-type: disc;样式（这个样式是ul的默认样式）
下方被划掉是因为：li本身是有text-align属性的，该样式会覆盖.box1设置的text-align属性，所以通过检查看，.box1的text-align属性就被划掉了：
li自身的text-align属性值会让li的文字对齐方式与.box1保持一致，所以.box1设置文字居中之后，li的文字就水平居中了。
2、
1）下方理解是可以的
需要注意的是，当选择器权重一样的时候，是按“就近原则”。
2）作用在对应标签上的权重需要根据选择器来确定，以视频中的代码为例：
3）.box1 #box2 #box3 { color: red;}这是给#box3设置字体颜色，#box3的子元素也可以继承到字体颜色。
3、行内样式的权值是1000，行内样式的权重>内联样式。如果样式冲突，生效的是在行内设置的样式，如果样式不冲突的话，样式都会生效。
上述都基于不添加!important，如果添加了!important，那么生效的就是加了!important的样式。
祝学习愉快~
0
相似问题