CSS的九种选择器

1、标签选择器：指使用HTML的某个标签。

p{color:blur;font-size:14px;}

2、ID选择器：首先给要添加样式的标签设置一个唯一的ID名称，然后在css中使用“#”来定义样式

#menu{
   	background-color: #808080;
   	color: #fff;
  	font-size: 36px;
 }
<nav id="menu">
   <ul>
      <li>新闻资讯</li>
      <li>娱乐天地</li>
      <li>体育竞技</li>
      <li>文化传媒</li>
   </ul>
 </nav>

3、class选择器：就是给要添加样式的标签加上一个类名，关键字 class，class选择器可以在多个元素中使用，在css中类选择器以一个点“.”符合显示

.test1{
    font-size:14px;
    font-weight: bold;
}
<p class="test1">啦啦啦啦啦</p>

4、并集选择器：就是多个标签选择器，但要使用逗号 “，”隔开

header,main{
    		border: 1px solid black;
    		width:600px;
            height:200px;
    		margin: 0 auto;
    	}
<header>
    内容
</header>
<main>
    内容
</main>

5、后代选择器：多个选择器以空格分开，组合成包含关系，且右边的选择器从属于左边，即右边的选择器只能在左边的选择器范围内选择

#menu h1{
  color:red;
}
<div id="menu">
    <h1 class="test1">商品分类</h1>
    <ul>
       <li class="test1">家用电器</li>
       <li>日用百货</li>
       <li>家纺用品</li>
       <li>电子产品</li>
     </ul>
</div>

6、子元素选择器：匹配第一个元素的直接后代

.food>li{
   	border: 1px solid red;
}
<ul class="food">
        <li>
            水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>
            蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>

7、兄弟选择器：相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

.p1 +p{
    color: blue;
}
<div class="test1">
    <h1>山东省景点</h1>
    <p id="p1">五岳独尊-泰山</p>
    <p>孔孟之乡-济宁</p>
    <p class="p2">江北水城-聊城</p>
    <p>人间仙境-蓬莱</p>
</div>


结果为：孔孟之乡-济宁

8、伪类选择器：

        :link选择器 选择未访问链接元素
        :visited选择器 选择已访问的链接元素
        :hover选择器 鼠标悬停在其上的元素
        :active选择器 被用户激活的元素，通常意味着用户即将点击该元素

       如果同时同时写四个伪类选择器，顺序必须为：link -> visited -> hover -> active

a:link{
    color: #000;
    text-decoration: none;
}
/*访问后样式*/
a:visited{
    color: #000;
}
/*鼠标移到超链接样式*/
a:hover{
    color: red;
}
/*鼠标点击时样式*/
a:active{
    color: yellow;
}
<a href="#">百度</a><br />
<a href="#">新浪</a><br />

9、属性选择器：对带有指定属性的 HTML 元素设置样式

a[href="#"]{
   	color: red;
   	font-size: 25px;
}
<a href="#" title="百度">百度一下</a><br />