关于ul ul ul 的css规则定义问题

html-css031

关于ul ul ul 的css规则定义问题,第1张

首先你要理解css命名规则

<div class="a1"><ul></ul></div>

如果你想定义这个ul的样式,可以直接ul

例如: ul {list-style-type: disc}

但是这样定义太广泛了,这个是让所有的ul行开始符都变成个点。

如果这个页面还有其他ul,也会受到影响

为了精确的定义这个div下的ul,你需要这样定义

.a1 ul {list-style-type: disc}

这样的意思就是类a1下的ul样式是个点,这样不会影响到其他ul的样式

很明显,这个命名规则是这样,在你要定义的样式前加上父级的类名,来相信的指认你定义的样式是属于哪的。 你可以在前面加上无数个父级类名来区分你设置的样式。

那么根据你的代码ul ul {list-style-type: disc}

意思就是ul下的ul样式是list-style-type: disc

另一个ul ul ul {list-style-type : square}的意思是

ul下的ul下的ul样式是list-style-type : square

如果html是这样

<ul class=u1><ul class=u2><ul class=u3></ul></ul></ul>

ul ul {list-style-type: disc}等同于.u2{list-style-type: disc}

ul ul ul {list-style-type : square}等同于.u3{list-style-type : square}

用CSS设置UL标签的列表符号,这个我们是不需要去设置的,因为ul默认就是标签符号的,如果你是使用了这个list-style:none;去掉了这个属性,然后你又想有的话,你就给这个ul一个id或者是class,然后在css中list-style-type:disc

!important这样就又有序号了,具体看代码:

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

list-style-type:disc

!important

}

</head>

<body>

<div

id='div1'>

<ul>

<li>测试1</li>

<li>测试2</li>

</ul>

</div>

</body>

</html>

要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。

HTML代码具体示例:

<div id="links">

<ul>

<li><a href="#">  </a></li>

<li><a href="#">  </a></li>

<li><a href="#">   </a></li>

<li><a href="#">   </a></li>

<li><a href="#">   </a></li>

</ul>

</div>

注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。

扩展资料:

在HTML中,有两种类型的列表:无序列表 - 列表项标记用特殊图形(如小黑点、小方框等);有序列表 - 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。

参考资料:UL_百度百科