CSS层叠样式表

1. 1. 类选择器：如果想将一组元素设定为相同的样式，可为它们设置相同的class属性值，再通过CSS类选择器指定相同的样式

<ul>

<li>普通列表项</li>

<li>普通列表项</li>

<li>普通列表项</li>

<li class="special">特殊列表项</li>

<li class="special">特殊列表项</li>

<li class="special">特殊列表项</li>

<li>普通列表项</li>

<li>普通列表项</li>

</ul>

.special {

font-size: 50px;

}

1. 1. 选择器分组：不同的元素使用相同的样式时，可以使用“，”隔开，表示并列关系

<h1>标题1</h1>

<h2>标题2</h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

h2,h3 {

border-style: solid;

border-width: 1px;

border-color: black;

}

1. 1. 派生选择器：使用“父元素 子元素”的格式定位到特定父元素下的子元素

<div>

<p>div下的段落</p>

<p>div下的段落</p>

<p>div下的段落</p>

</div>

<p>普通段落</p>

<p>普通段落</p>

<p>普通段落</p>

div p {

background-color: blue;

color: white;

font-size: 50px;

}

1. 1. id选择器结合派生选择器：“#id值 子元素”使用id选择器定位到特定元素后，定位其特定子元素

<div>

<p>段落</p>

<p>段落</p>

</div>

<div id="targetDiv">

<p>目标段落</p>

<p>目标段落</p>

</div>

<div>

<p>段落</p>

<p>段落</p>

</div>

#targetDiv p {

background-color: blue;

color: white;

font-size: 50px;

}

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。