css基础选择器和组合选择器

css选择器用于选取要设置样式的HTML元素。

基础选择器

id选择器

<html>
<head>
<style>
#para1 {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<p id="para1">胖虎同学</p>
<p>www.wangyouwu.cn</p>

</body>
</html>

表现：

元素选择器

<html>
<head>
<style>
h1 {
  text-align: center;
  color: red;
} 
</style>
</head>
<body>
<h1>胖虎同学</h1>
<p>只有h1才会变红</p>
</body>
</html>

表现：

类选择器

<html>
<head>
<style>
.center {
  background: green;
}
</style>
</head>
<body>
<h1 class="center">我被绿了</h1>
<p>你被绿了。</p> 
</body>
</html>

表现：

tips

组合器选择器

后代选择器（空格）

<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>后代选择器</h1>
<p>后代选择器匹配作为指定元素后代的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section>
</div>

<p>段落 4。不在 div 中。</p>
<p>段落 5。不在 div 中。</p>

</body>
</html>

表现：

子选择器（`>`)

<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>子选择器</h1>
<p>子选择器 (>) 选择属于指定元素子元素的所有元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
  <section><p>div 中的段落 3。</p></section> <!-- 非子但属后代 -->
  <p>div 中的段落 4。</p>
</div>

<p>段落 5。不在 div 中。</p>
<p>段落 6。不在 div 中。</p>

</body>
</html>

表现：

相邻兄弟选择器（+）

<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>相邻兄弟选择器</h1>
<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

</body>
</html>

表现：

通用兄弟选择器（~）

<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h1>通用兄弟选择器</h1>
<p>通用的兄弟选择器（~）选择指定元素的所有同级元素。</p>

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

</body>
</html>