1 关于选择器

重点讲解：

选择器作为CSS的重要部分，这里强调基本选择器的使用和其他选择器的基本格式。

讲到CSS就不得不说到选择器，为了样式化某些元素，我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效，那很可能是你的选择器没有像你想象的那样选中你想要的元素。

每个CSS规则都以一个选择器或一组选择器为开始，去告诉浏览器这些规则应该应用到哪些元素上。

接下来我们将要详细的学习各种选择器的使用。

选择器的分类：

分类	名称	符号	作用	示例
基本选择器	元素选择器	标签名	基于标签名匹配元素	div{ }
	类选择器	.	基于class属性值匹配元素	.center{ }
	ID选择器	#	基于id属性值匹配元素	#username{ }
属性选择器	属性选择器	[]	基于某属性匹配元素	[type]{ }
伪类选择器	伪类选择器	:	用于向某些选择器添加特殊的效果	a : hover{ }
组合选择器	后代选择器	空格	使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素	.top li{ }
	子级选择器	>	使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素	.top > li{ }
	同级选择器	~	使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素	.l1 ~ li{ }
	相邻选择器	+	使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素	.l1 + li{ }
	通用选择器	*	匹配文档中的所有内容	*{ }

1.1 基本选择器

1）元素选择器

页面元素：

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

选择器：

选择所有li标签,背景变成蓝色
li{
    background-color: aqua;
}

2）类选择器

页面元素：

<div>
    <ul>
        <li class="ulist l1">List item 1</li>
        <li class="l2">List item 2</li>
        <li class="l3">List item 3</li>
    </ul>
    <ol>
        <!--class 为两个值-->
        <li class="olist l1">List item 1</li>
        <li class="olist l2">List item 2</li>
        <li class="olist l3">List item 3</li>
    </ol>
</div>

选择器：

选择class属性值为l2的,背景变成蓝色
.l2{
    background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{
   color: wheat;
}

3）ID选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

#tow{
    background-color: aqua;
}

4）通用选择器

页面元素：

<div>
    <ul>
        <li class="l1" id="one">List item 1</li>
        <li class="l2" id="two">List item 2</li>
        <li class="l3" id="three">List item 3</li>
    </ul>
    <ol>
        <li class="l1" id="four">List item 1</li>
        <li class="l2" id="five">List item 2</li>
        <li class="l3" id="six">List item 3</li>
    </ol>
</div>

选择器：

所有标签 
*{
    background-color: aqua;
}

1.2.1 属性选择器

页面元素：

   <ul class="l1">
        <li  >List item 1</li>
        <li  >List item 2</li>
        <li  >List item 3</li>
    </ul>
    <ul class="l2">
        <li  id="four">List item 1</li>
        <li  id="five">List item 2</li>
        <li  id="six">List item 3</li>
    </ul>

    <p class="">
        p item
    </p>

选择器和效果图，示例1

[属性名]{ }

选择器和效果图，示例2

标签名[属性名]{ }

选择器和效果图，示例3

标签名[属性名='属性值']{ }

1.2.2 伪类选择器

伪类选择器，用于选择处于特定状态的元素，例如，一些元素中的第一个元素，或者某个元素被鼠标指针悬停。

格式：

标签名:伪类名{ }

常用伪类:

• 锚伪类

  在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

  a:link {color:#FF0000;} 	/* 未访问的链接 */
  a:visited {color:#00FF00;} 	/* 已访问的链接 */
  a:hover {color:#FF00FF;} 	/* 鼠标悬停链接 */
  a:active {color:#0000FF;} 	/* 已选中的链接 */
  

  注意：

  伪类顺序 link ，visited，hover，active，否则有可能失效。

  代码示例：

  HTML 代码 ： 
  <div>
      <a class="red" href="http://www.itheima.com">黑马</a> <br/>
      <a class="blue" href="http://www.itheima.com">传智</a>
  </div>
  
  
  CSS 代码 ： 
  /* 选择a标签,class值为red ,设置访问后为红色链接*/
  a.red:visited {
      color: red;
  }
  

1.2.3 组合选择器

页面元素：

<div>
    <ul class="l1">
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <ul class="l2">
            <li id="four">List item 1</li>
            <li id="five">List item 2</li>
            <li id="six">List item 3</li>
        </ul>
    </ul>
</div>

1）后代选择器

选择器：

.l1 li{
    background-color: aqua;
}

2）子级选择器

选择器：

.l1 > li{
    background-color: aqua;
}

3）同级选择器

选择器：

.l1 ~ li{
    background-color: aqua;
}

4）相邻选择器

选择器：

.l1 + li{
    background-color: aqua;
}

2 总结

1. CSS的引入方式有三种，建议使用外部样式表。
2. 注释类似于java多行注释。
3. 选择器是CSS的重要部分：
4. 基本选择器：可以通过元素，类，id来选择元素。
5. 属性选择器：可以通过属性值选择元素
6. 伪类选择器：可以指定元素的某种状态，比如链接
7. 组合选择器：可以组合基本选择器，更加精细的划分如何选择