Question

怎样才能用css控制第一个li标签的样式，和其他li的样式不同

怎样才能用css控制第一个li标签的样式，和其他li的样式不同，

<ul>
<li>新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ul>

例如 控制 第一个新闻一 为粗体18号字，其他为14号字
这个li 内容是调用出来的，别用手动输入 <li style=" ">新闻一</li>
大侠 解决一下啊！

Answer 1

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:18px;font-weight：bold；} //字体样式：粗体18px字体

效果：

Answer 2

可以用伪类 但是浏览器兼容性不好

ul > i:first-child{font-weight:18px;}

所以推荐用JQUERY 或者是 JAVASCRIPT

JQUERY是

$('ul li:eq(0)').css('font-weight', '18px');

JAVASCRIPT是

document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.fontWeight = '18px';

追问

伪类 好像不行
js 的我自己看过，学过C++ 但是js 也不会用，大侠帮我整理一下：

document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.fontWeight = '18px';

可以写详细点吗 ？

追答

你写的就可以 不过要放在HTML后面 也就是最后 不然执行到那时候他找不到DOM

Answer 3

ul li:first-child {
font-size: 14px;

}

追问

怎么控制不了？

追答

低版本浏览器（包括360搜狗） 都没法识别， 需要2002年以后的新浏览器

Answer 4

可以用伪类
ul > i:first-child{font-weight:18px;}

所以推荐用JQUERY 或者是 JAVASCRIPT

JQUERY是

$('ul li:eq(0)').css('font-weight', '18px');

JAVASCRIPT是

document.getElementsByTagName('ul')[0].getElementsByTagName('li')[0].style.fontWeight = '18px';

Answer 5

<ul class="warp">
<li class="active">新闻一</li>
<li>新闻二</li>
<li>新闻三</li>
</ul>

<style type="text/css">
.warp li{
font-size : 14px;
}
.warp li.active{
font-size: 18px;
font-weight: bold;
}
</style>