CSS---选择器

CSS选择器有 基本选择器 和 复合选择器；

1.基本选择器

①通用选择器

给所有的标签加上css样式，表示符号为“ * ”，例：

<style type="text/css">
　　*{
  　　color:deep gray;
        font-size:14px;
  　　backgroud:rgb(150,150,150,0.8)      
　　}
</style>

②标签选择器

标签选择器是给某个标签加css样式，自动指向该标签，例：

<style type="text/css">

　　div{　　　　//不需要引用，把样式自套用到对应的div标签，并给所有的div标签都加上该样式
  　　width:300px;
 　　 height:300px;
  　　backgroud:rgb(150,150,150,0.8)      
　　}

</style>

③类选择器

给标签加上类属性（class="类的自定义名称"），类的标示符号为“.”，例：

<style type="text/css">
　　.demo1{
  　　width:300px;
 　　 height:300px;
  　　backgroud:rgb(150,150,150,0.8)      
　　}
</style>

<div class="demo1"></div>

④id选择器

给标签加上id属性（id="demo2"），id的表示符号为“#”，例：

<style type="text/css">
　　#demo2{
  　　width:300px;
 　　 height:300px;
  　　backgroud:rgb(150,150,150,0.8)      
　　}
</style>

<div class="demo2"></div>

注意：id选择器的级别优先于类选择器，而且id选择器具有唯一性只能引用一次；

　　通常id选择器是给javascript使用，不用来设置css样式，设置css样式通常使用类选择器；

选择器的优先级：标签选择器 < 类（class）选择器 < id选择器 < 行内样式表；

2.复合选择器

①多元素选择器

多元素选择器是给多个标签共有的属性放到一起，可以是标签、类选择器、id选择器，例：

p,h3,div,input,#demo1,.table1{
    font-size:18px;
    color:blue;      
}

②后代选择器

后代选择器是给html的后代标签加css样式

③子元素选择器

子元素选择器是给html标签的子标签添加css样式，子元素只包括标签里面的第一层标签，例：

<style type="text/css">
　　.demo1 >p{    //带有大于号的是明确的指向，推荐使用
  　　font-size:14px;
 　　 color:red;  
　　}
       p h3{    //不带有大于号的是模糊指向
  　　font-size:14px;
 　　 color:red;  
　　} 
</style>

<div class="demo1">
    <p>
        <h3>这是一段测试内容的标题</h3><br>
        这是一段测试内容的文字部分
    </p>
</div>