CSS选择器

类型选择符直接应用于HTML元素

类选择符可在页面中多次使用

ID选择符在同一个页面中只能使用一次

通配选择符应用于页面中所有HTML元素

包含选择符应用于页面中某些元素包含的子元素

选择符分组用于一次定义几个选择符的样式

1.标签选择器

    <!--标签选择器(元素选择器)
        文档的元素就是最基本的选择器
        如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a-->

2.ID选择器

    <!--ID选择器：要给添加样式的标签设置一个ID名称
        可以为标有特定ID的HTML元素指定特定的样式(独一无二)
        HTML元素以Id属性来设置ID选择器，CSS中ID选择器以"#"符号来定义。
        
        格式：
        #ID名{
            
        }-->

3.Class选择器

    <!--类选择器：就是给要添加样式的标签加上一个类名，关键字class
        用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用
        在HTML中以class属性表示，在CSS中类选择器以一个点"."符号显示。
        语法：.类名（例如:.class1{..}）
       -->

4.并集选择器

    <!--并集选择器:创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素
        或者理解成将多个相同样式定义的选择器以逗号进行分组。
        语法：选择器，选择器，选择器{}-->

5.后代选择器

    <!--多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边
        即右边的选择器只能在左边的选择器范围内选择-->

6.子元素选择器

    <!--子代选择器和后代选择器很像，不过只选择匹配元素中的直接后代
        目标元素为匹配第一个选择器的元素的直接后代,且匹配第二个选择器
        用于选择指定标签元素的第一代子元素
        语法：第一个选择器>第二个选择器
        总结：>作用于元素的第一代后代，空格作用于元素的所有后代。-->

    <style>
    .food>li{
    		border: 1px solid red;
    	}
    /*该元素所有后代中的第一个li*/
    .food li:first-child{
    	background-color:yellow;
    	border: 1px solid red;
    }
    /*该元素的直接下一代的最后一个Li*/
    .food>li:last-child{
    	background-color: gray;
    }
    </style>

7.兄弟选择器

   <!--
       相邻兄弟选择器可以选择紧接着另一元素后的元素，必须得是同一个父元素
   -->

     <style>
     	#p1{
     		color: red;
     	}
     	#p1+p{
     		color: blue;
     	}
     </style>

8.伪类选择器

    <!--动态伪类选择器：根据条件的改变匹配元素，是相对于文档的固定状态来说的。
        :link选择器 选择未访问链接元素
        :visited选择器 选择已访问的链接元素
        :hover选择器 鼠标悬停在其上的元素
        :active选择器 被用户激活的元素，通常意味着用户即将点击该元素-->

9.属性选择器

    <!--属性选择器:对带有指定属性的 HTML 元素设置样式
        可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
    -->

    <style>
    	a[href="#"]{
    		color: red;
    		font-size: 36px;
    	}
    	#img1{
    		border: 5px solid blue;
    	}
    	input[name="UserName"]{
    		background-color: yellow;
    		color: red;
    	}
    </style>