HTML入门第四课（学习使用CSS）

今天我们一起来探讨关于css选择器的内容

1.标签选择器：

      语法：标签名{}

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

      注意：常用的标签就那么多，如果用标签选择器，很可能会选中其他不需要设置样式的内容

2.id选择器

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

      语法：#id属性值{}

      注意：

          id属性值：不能以数字开头，最好不要是汉字

          id属性值不能复用

3.class选择器

    作用：跟id选择器很像，选中对应class属性值的内容

    语法：.class属性值{}

    注意：也是我们用的最多的选择器

4.通配选择器

      语法：*{}

      作用：选中所有的标签  

以上几种选择器，都是较为简单的选择器，下面来看几种复杂选择器

5.复合选择器

   a.交集选择器

          作用：选中同时满足选择器1选择器2选择器3····对应的内容

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

          注意：如果选择器中有标签选择器，那么标签选择器必须放在首位

   b.并集选择器（群组选择器）

          作用：同时选中选择器1，选择器2·····对应的内容

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

6.关系选择器

  在介绍关系选择器之前，我们需要先了解一下元素之间的关系，主要有如下三种：

（1）父子关系

       直接包含和被包含的关系

       父元素：直接包含子元素

       子元素：直接被父元素包含

（2）祖先后代关系

      直接或间接包含和被包含的关系（包括父子关系在内）

      祖先元素：直接或间接包含后代元素

      后代元素：直接或间接被祖先元素包含的

 （3）兄弟关系

      拥有共同的父元素

由此衍生而来的关系选择器有：

a.子元素选择器：

      作用：通过指定的父元素找到指定的子元素

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

b.后代选择器

      作用：通过指定的祖先元素找到指定的后代元素

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

c.下一个兄弟选择器

   作用：通过指定的兄找到指定的弟

   语法：兄+弟{}

d.所有兄弟选择器

    作用：通过指定的兄找到下面所有的兄弟

    语法：兄～弟{}

CSS选择器的种类远不止以上几种,其余内容我们下一篇文章继续探讨