html-css语法选择器

CSS的语法：1.选择器  2.声明块       

        声明块：名值结构；    样式名:样式值；

选择器书写的位置：

<title>Document</title>

    <style>

     选择器   

    <style>

平时我们常用的选择器有以下几类：

 1、元素选择器

      作用：选中对应元素/标签里面的内容  如：<h1>你不要过来呀！</h1>   

      语法：标签名{}

      例如：h1{}   p{}*/

  2、id选择器  

      作用：选中对应id属性值的元素  id的设置如： <p id="p1">我只是路过的假面骑士</p>

      语法：#id属性值{}

      例子：#p1{}     #dd{}

      注意：id属性值是独一无二的存在！

   3、class选择器

          作用：选中对应class属性值的元素 如：<p class="p1">我是总司一切的男人！</p>中的p1

          语法：.class属性值{}

          例如：.p2{}   .pp{}  (属性值前面有个点别忘了)

          注意：id选择器和class选择器很像，只不过class属性值可以复用！

   4、通配选择器（我喜欢叫它全家桶选择器）

      作用：选中页面中所有的元素

      语法：*{}

组合类选择器

    1、交集选择器

      作用：选中同时符合多个选择器条件的元素

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

      例如  div.red{}  .red1#red2{}

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

    2、并集选择器

     作用：同时选中对应选择器的元素

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

 利用元素关系使用的选择器

<div id="银河系">

      太阳系

      <p>火星/p>

      <p>地球

        <span>南半球</span>

        <span>北半球</span>

      </p>

      <div>地心</div>

       </div>

1、子元素选择器

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

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

2、后代选择器

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

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

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

      语法：兄+弟{} */

4、所有兄弟选择器

      语法：兄~弟{}

元素之间的关系

      父子关系：直接包含、被包含的关系

      祖先后代关系 ：直接或间接包含、被包含的关系

      兄弟关系：拥有共同的父元素