css 选择器简单总结与运用 1、选择器分组对不同的标签加逗号 2、派生选择器 3、id选择器 4、类选择器 5、

1、选择器分组

对不同的标签加逗号

h1,h2,h3,h4,h5,h6{
  background-color: green;
}

`2、派生选择器`

li span{
  padding: 7px 12px;
  background-color: #EEF1F6;
}

<p><span>我有一头小毛驴</span></p>

<ul>
<li><span>我有一头小毛驴。有样式</span></li>
<li>我有一头小毛驴。没有样式</li>
</ul>

3、id选择器

#lzp{
  padding: 7px 12px;
  background-color: #EEF1F6;
}

<p><span>我有一头小毛驴</span></p>

<ul>
<li id='lzp'>我有一头小毛驴。有样式</li>
<li>我有一头小毛驴。没有样式</li>
</ul>

4、类选择器

.center {
text-align: center
}

<h1 class="center">
字体居中
</h1>

5、属性选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" href="http://w3school.com.cn">W3School</a>
<hr />

<h1>无法应用样式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>