CSS选择器

一、CSS简介

 css ：层叠样式表

           网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式

           而最终我们能看到的只有最上边的一层

           设置网页中元素的样式

二、CSS书写方式

1、第一种方式：内联样式/行内样式

      写在开始标签里面，写一个style属性，讲一组一组的样式写在style属性值里面

      color: red;  样式名:样式值;

      可以写多组样式，但一定要用;隔开

      缺点：（1）结构和表现耦合了

                 （2）不容易修改

      注意：尽量少用

2、第二种方式：内部样式表

      写在head标签内部，写一个子元素，style标签，

      通过选择器选中对应的要设置的元素/标签，在{}里设置一组一组样式

      也可以写多组样式，也需要用;隔开

      缺点：不方便复用

3、第三种方式：外部样式表

      在html文件的外部新建一个.css文件，在css文件里写样式

      然后通过在head标签内部写子标签link标签，将html文件和css文件联系在一起         

      link标签里有href属性，在href里写引入css文件的路径

      注意：这种方式推荐使用

三、CSS语法

      CSS的注释、作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

      CSS的语法：选择器、声明块  

      声明块：名值对结构

      样式名：样式值

四、CSS常用选择器

1、元素选择器(标签选择器)

      语法：标签名{}

      作用：选中对应标签包裹的内容

      例子：h1{},h2{},p{},div{},span{}

     需求二：将第一句诗变绿色  

2、id选择器 (id属性值不可以重复使用)

      语法：#id属性值{}

      作用：选中对应的id属性值的内容

      例子：#p1{},#pp{},#abc{}

3、class选择器（用法跟id选择器是一样的，只不过它可以复用）

      语法：.class属性值{}

      作用：选中对应class属性值的内容

4、通配选择器

      语法：*{}

      作用：选中页面中所有的标签

5、复合选择器（有两种）：

      （1）交集选择器

      作用：选中同时满足多个条件的元素

      语法：选择器1选择器2选择器3····{}

      注意：如果选择器中有元素选择器，那么元素选择器必须放在第一位

      （2）并集选择器

      作用：同时选中满足条件的元素

      语法：选择器1,选择器2,选择器3····{}

6、关系选择器

   （1）子元素选择器

      作用：选中指定的父元素下面指定的子元素

      语法：父元素>子元素{}

      例如：div>p,.big>p,#big>p{}

   （2）后代选择器

      作用：选中指定祖先元素下面指定的后代元素

      语法：祖先元素 后代元素{}

      例如：#big span{}

   （3）选择下一个兄弟(仅挨着我的)选择器

      作用：选择下一个兄弟

      语法：兄+弟{}

   （4）选择下面所有的兄弟(前面的不选)

      语法：兄～弟{}

7、属性选择器

      语法：[属性名]{} 选择含有指定属性的元素

                 [属性名=属性值]{} 选择含有指定属性和属性值的元素

                 [属性名^=属性值]{} 选择属性值以指定值开头的元素  

                 [属性名$=属性值]{} 选择属性值以指定值结尾的元素

                 [属性名*=属性值]{} 选择属性值含有某值的元素

8、伪类选择器

      知识点:去掉项目符号*/

    （1）伪类（不存在的类，特殊的类）

          伪类用来描述一个元素的特殊状态

          比如：第一个元素，被点击的元素，鼠标移入的元素···

          特点：一般请情况下，使用：开头

             1、 :first-child  第一个子元素

             2、 :last-child   最后一个子元素

             3、 :nth-child()  选中第n个子元素

                   特殊值： n    所有的

                          2n或even  选中偶数

                          2n+1或odd  选中奇数

           以上这些伪类都是根据所有的子元素进行排序

             1、:first-of-type

             2、:last-of-type

             3、:nth-of-type()

                  功能跟上面相似，不同的是，这是在同类型的子元素中去选择

    （2）not() 否定伪类

           将符合条件的元素从选择器中去除  

---

---