Question

CSS样式表写法的继承问题

比如我在样式表里定义了
.divwrap ul li{ witdh:50px; height:30px; display:block}
.masli{ witdh:30px; height:20px; display:block; color:red}

<div class="divwrap">
<ul>
<li></li>
<li class="masli"></li>
<li></li>
<li></li>
</ul>
</div>

我是想要在这个ul列表里的其中一个LI和其他的不一样，故我加了个MASLI的CLASS,但是实际上这个li的长宽是用divwrap ul li里的属性,divwrap ul li这里没有定义的color则是正常， 请问要怎么写才是用masli里的长宽

Answer 1

.masli改成.divwrap ul li.masli
.divwrap ul li和.masli这两个写法，.divwrap ul li的优先级要高于.masli，因为.divwrap ul li的定义更明确。就好比你给人指路，“上海市XX路33号XX栋XX楼XX室”和 “上海市xx路33号”，明显前面一个更明确，更明确的让人更容易查找。
另外witdh单词应该为width

Answer 2

我也经常遇到这种问题，一般我是如下操作：

第一方式：定义两种li的css样式，在每个li中class中进行不同调用；

第二方式：其中不同与其他的那个li换成其他标签如ol，然后通过样式定义这个标签

<style type="text/css">

ul,li,ol{margin:0;padding:0;list-style:none;list-style-type:none;}

.divwrap ul li{ width:50px; height:30px; display:block; background-color:#00FF66}

.masli{width:30px; height:20px; display:block; background-color:#FFCC33}

</style>

<div class="divwrap">

<ul>

<li>1</li>

<ol class="masli">2</ol>

<li>3</li>

<li>4</li>

</ul>

</div>

Answer 3

ul,li 这几个元素在继承上会有优先，你需要写：li.masli{ witdh:30px; height:20px; display:block; color:red}（在前台加一个li ，注意不要有空格）
如果是div，那么你这个写法就ok

Answer 4

请注意你的CSS样式书写有问题，宽度是width，而不是你写的witdh，你仔细检查下就行了。
另外：你既然前面写的是 .divwrap ul li 后面最好写成：.divwrap ul li.masli，这样比较规范。
如：
.divwrap ul li{ width:200px; height:30px; display:block;background-color:#0f3; }
.divwrap ul li.masli{ width:100px; height:20px; display:block;color:red;background-
color:#f96;}

追问

不知道为什么divwrap ul li.masli这样写不行。divwrap ul li .masli这样写就可以（LI后面加空格）

Answer 5

如果元素本身的style里有对其设置属性，则优先使用本身的style；
其次是本页面定义的样式以及引用的css文件。
也可以在样式后加“！important”，这样则被认为这是最优先使用的样式，即便其他样式再对其重写也无效