【HTML】CSS的选择器01

HTML中（CSS中常用的选择器）

元素选择器

作用： 通过元素选择器可以选中页面中所有的指定元素
语法： 标签名{}
`

<style type = "text/css">
	p{
	color: yellow;
}
</style>
<p>我是一只猫</p>

id选择器

作用： 通过元素的id属性值选中唯一的一个元素
语法： #id属性值{}

<style type = "text/css">
	#hello{
	color: yellow;
}
</style>

<p id = "hello">我是一只猫</p>

class选择器

作用： 通过元素的class属性值选中class名一致的元素
语法： .class属性值{}
额外功能： 可以通过设置多个class属性值，选中该元素

<style type = "text/css">
	.hello{
	color: yellow;
}
	.ha{
		background-color: purple;
	}
</style>
<p class = "hello ha">我是一只猫</p>
<p class = "hello">我是哈哈哈</p>

选择器分组（并集选择器）

作用： 可以同时选中多个选择器对应的元素
语法： 选择器1，选择器2，选择器3…(逗号隔开，选择器之间是并集的关系)

<style type = "text/css">
	.hello, .ha{
	color: yellow;
}
</style>
<p class = "hello ha">我是一只猫</p>
<p class = "hello">我是哈哈哈</p>

复合选择器（交集选择器）

作用： 可以选中同时满足选择器的元素
语法： 选择器1选择器2选择器3…(选择器之间是交集的关系)

<style type = "text/css">
	span.hello{
	color: yellow;
}
</style>

<p class = "hello ha">我是一只猫</p>
<p class = "hello">我是哈哈哈</p>
<span class = "hello">啦啦啦</span>

后代元素选择器

作用： 选中指定元素的指定后代元素
语法： 祖先元素 后代元素{}

<style type = "text/css">
      #ha span{
        color: yellow;
      }
      #ha p span{
        background-color: purple;
      }
  </style>
  
<div id = "ha">
    <span>我是div的span元素</span>
    <p><span>我是p元素中的span元素</span></p>
  </div>

子代元素选择器

作用： 选中指定元素的指定子代元素
语法： 父亲元素 > 子类元素{}

    #ha > span{
      background-color: purple;
}
	<div id = "ha">
    <span>我是div的span元素</span>   /*变成紫色背景*/
    <p><span>我是p元素中的span元素</span></p>
  </div>