css控制ul标签下li样式

html-css026

css控制ul标签下li样式,第1张

在ul标签下li的默认样式为一个实心圆（disc）   可忽略不写li样式的改变是用 list-style:属性值 来改变的我们给li设置css，去除默认样式（实心圆）将li的样式设置为空心圆将li的样式设置为实心正方形其他：  decimal   :  　CSS1　阿拉伯数字   lower-roman   :  　CSS1　小写罗马数字     upper-roman   :  　CSS1　大写罗马数字     lower-alpha   :  　CSS1　小写英文字母     upper-alpha   :  　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　大写拉丁字母 

1、在ul样式中设置文本居左对齐。

ul {

padding:0

margin:0

text-align: left

list-style-type: none

}

2、标签大小不同，可以用自定义的背景图片代替标签样式。

ul li

{

background-image:url(sqpurple.gif)

background-repeat:no-repeat

background-position:0px 5px

padding-left:14px

}

扩展资料：

控制ul下具体的li:

1、ul li:first-child{ }

第一个li

2、ul li:last-child{ }

最后一个li

3、ul li:nth-child(4){ }

指定第几个,4就是代表第四个li

4、ul li:nth-child(2n+1){background:red}

匹配第1、第3、第5、…个li

5、ul li:nth-child(odd){background:red}

奇数的li

6、ul li:nth-child(even){background:red}

偶数的li