用css 只控制第一个li的样式怎么控制?

html-css018

用css 只控制第一个li的样式怎么控制?,第1张

很多方法都是可以实现值控制一个li样式而不影响其他的,最简单的是给第一个li设置一个id或者设置一个单独的class,也可以使用最新的css3选择器。

工具原料:编辑器、浏览器

1、设置类或者id的方法

简单的代码示例如下:

<body>

<ul>

<li id="special">111</li>

<li>222</li>

<li>333</li>

<li>444</li>

<li>555</li>

</ul>

<style>

#special{

background: #ccc

}

</style>

</body>

2、使用css3的选择器

<body>

<ul>

<li id="special">111</li>

<li>222</li>

<li>333</li>

<li>444</li>

<li>555</li>

</ul>

<style>

li:first-child

background-color:yellow

}

</script>

</body>

css控制第一个li标签的样式,和其他li的样式不同:给第一个<li>标签添加class或者id,然后编写css代码。

html:给第一个li元素添加一个class类名为“menu1”。

html:

<ul>

<li class=“menu1”>新闻一</li>

<li>新闻二</li>

<li>新闻三</li>

</ul>

css代码:

li{font-size:14px;} //4px大小的字体

.menu1{font-size:18pxfont-weight:bold;} //字体样式:粗体18px字体

效果:

css2里的伪类均摊符,意思是:匹配父元素的第一个子元素

你可以在css手机里可以查到这个伪类选择符

比如:

<ul>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

<li>列表项四</li>

</ul>

在上述代码中,如果我们要设置第一个li的样式,那么代码应该写成li:first-child{sRules},而不是ul:first-child{sRules}。其它相关的伪类都如此。