如何控制<li>里的点

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何控制<li>里的点相关的知识,希望对你有一定的参考价值。

如何控制<li>里的点

css 管控
--------------------------------------------------------------------------
用CSS定义li样式

li的这个样式定义是将列表项目使用图片来代替显示的小圆点。当然您也可以显示成其它效果,详细请参阅下面的定义:
  列表项目效果的CSS定义
li list-style-image: url(images/disc.gif);
   *list-style-type: circle(可换成自己想要的样式); 列表项目样式
   disc :     CSS1 实心圆
   circle :    CSS1 空心圆
   square :    CSS1 实心方块
   decimal :    CSS1 阿拉伯数字
   lower-roman :  CSS1 小写罗马数字
   upper-roman : CSS1 大写罗马数字
   lower-alpha : CSS1 小写英文字母
   upper-alpha : CSS1 大写英文字母
   none :     CSS1 不使用项目符号
   armenian :   CSS2 传统的亚美尼亚数字
   cjk-ideographic:CSS2 浅白的表意数字
   georgian :   CSS2 传统的乔治数字
   lower-greek :  CSS2 基本的希腊小写字母
   hebrew : CSS2 传统的希伯莱数字
   hiragana : CSS2 日文平假名字符
   hiragana-iroha: CSS2 日文平假名序
   katakana : CSS2 日文片假名字符
   katakana-iroha: CSS2 日文片假名序号
   lower-latin : CSS2 小写拉丁字母
   upper-latin : CSS2 大写拉丁字母
   *list-style-image: url(images/disc.gif); 用图像disc.gif代替列表项目显示
   *list-style-position : outside | inside
   outside:  列表项目标记放置在文本以外,且环绕文本不根据标记对齐
   inside :  列表项目标记放置在文本以内,且环绕文本根据标记对齐
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

list-style-type版本:CSS1/CSS2  兼容***:IE4+ NS4+ 继承***:有

语法:

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

参数:

disc :  CSS1 实心圆
circle :  CSS1 空心圆
square :  CSS1 实心方块
decimal :  CSS1 阿拉伯数字
lower-roman :  CSS1 小写罗马数字
upper-roman :  CSS1 大写罗马数字
lower-alpha :  CSS1 小写英文字母
upper-alpha :  CSS1 大写英文字母
none :  CSS1 不使用项目符号
armenian :  CSS2 传统的亚美尼亚数字
cjk-ideographic :  CSS2 浅白的表意数字
georgian :  CSS2 传统的乔治数字
lower-greek :  CSS2 基本的希腊小写字母
hebrew :  CSS2 传统的希伯莱数字
hiragana :  CSS2 日文平假名字符
hiragana-iroha :  CSS2 日文平假名序号
katakana :  CSS2 日文片假名字符
katakana-iroha :  CSS2 日文片假名序号
lower-latin :  CSS2 小写拉丁字母
upper-latin :  CSS2 大写拉丁字母

说明:

设置或检索对象的列表项所使用的预设标记。

若list-style-image属***为none或指定图像不可用时,list-style-type属***将发生作用。

仅作用于具有display值等于list-item的对象(如li对象)。

注意:ol对象和ul对象的type特***为其后的所有列表项目(如li对象)指明列表属***。请参阅我的其他著作。

IE5.5尚不支持所有CSS2的值。

对应的脚本特***为listStyleType。
参考技术A

你自己看下吧 实在太多了

用js控制父元素中的子元素,不要用css,大神请进

举个例子
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

一共有10个li
他们的背景颜色都是#000黑色
但我想改变从第四个li开始到第十个li的背景颜色,变成red;
用js来做,不要用css,我就想知道如何操作

var oLis = document.getElementsByClassName("dad")[0].getElementsByTagName("li");
for(var i = 3;i<oLis.length;i++)
oLis[i].style.backgroundColor = "red";

这个是原生js写的,因为用的getElementsByClassName有兼容性问题,我就不写解决的函数了

$(function()
 $(".dad").find("li").slice(3).css("backgroundColor","red")
)

这个是用JQ写的


这两个你要哪个拿哪个,不懂追问,反正这是小问题,满意劳烦采纳,实在需要原声兼容我补充给你

参考技术A <html>
<script src="jquery-1.9.1.js"></script>
<style type="text/css">
liwidth:20px;height:20px;background:black;margin-top:20px;
</style>
<body>
<div class="dad">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

</div>

<script>
$(function()
var obj = $(".dad").find("li");
$.each(obj,function(k,v)
if(k >= 3)
$(this).css("background","red");

)
);
</script>
</body>
</html>本回答被提问者采纳

以上是关于如何控制<li>里的点的主要内容,如果未能解决你的问题,请参考以下文章

CSS li的图片样式

如何在JS里面来控制ul标签的显示与隐藏?

css 中的li 里面默认的黑色点如何换成红色的,然后圆圈变大

如何使用可拖放将 <li> 附加到 <ul>?

如何控制百里香中的href属性

html中用ul 时可以去除列表前面的点 那用ol时可以去除吗