CSS的定义规则

定义规则
图中的选择符，也就是今天我们的主角选择器。熟悉CSS的一眼就能看出图中是声明了一个类选择器。再来看一张图：
CSS选择器一览

图上六种选择器在加第一个图的类选择器一共7种。

1.类选择器

• 类选择器以点开头。.box{}, .content{}....等等

• 在标签中通过class引用。

  .box{
      width:100px;
      height:100px;
      background: #3385ff;
  }
   .content{
    margin-left: 40px;
    width:20px;
    height: 20px;
    border-radius: 50%;
    background: #666666;
  }
  

引用：

    <div class="box">
        <div class="content"></div>
    </div>

效果：

类选择器

2.标签选择器

• 选择符为标签名

• 指定哪个标签为选择符则整个文档中的所有该标签都会使用后面的css属性。

  p{color: #be1932;}
  h3{ color: yellow;}
  

HTML：

<section>
    <h3>hello，css!</h3>
    <p>CSS的定义规则：<span>选择器</span> {属性1：属性值，属性2：属性值....}；由选择期大括号，大括号内放css各种属性和值。</p>
</section>

效果：

标签选择器

3.子选择器

• 以某一个选择符开始作为父级后面紧跟一个>（向右尖角号），尖角号后面紧跟的选择符为子选择器

• 子选择器仅在父级下起作用，即如果他的直接父级元素不是尖角号前面的选择器则不会生效。

• 子选择器可连续定义多个；.one > .two > .three {};意思是在.one下面的直接子元素使用类选择器two的元素的直接子元素使用类选择器three才会生效。

  .one{
        color: #666666;
    }
    .one > .two{
        color: #be1932;
    }
    .one > .two > .three{
        color: #F5AA5F;
    }
  

HTML:

    <section>
        <div class="one">
           <span class="two">two-hello </span>
           <span> one-Hi</span>
            <span class="two">
                <span class="three"> three-hello</span>
                <span> two-Hi</span>
            </span>
            <div class="three">
                three
                <!--这里这个three不会生效，因为 three选择器要生效必须放在父级使用two的情况下-->
            </div>
        </div>
    </section>

效果：

子选择器

4.子代选择器

*子代选择器跟子选择器区别是子选择器只针对当前父级元素下的直接子元素有效，他的孙子辈，曾孙辈都无效，子代选择器则相反，它所有的后代都可以使用。共同点是不是在该元素内的其他元素不能使用

• 以空格隔开

• 选择符越靠前父级越高

• 所有子代都可以生效

    .myFontFather{
        color: #0000cc;
    }
    .myFontFather p{
        color: aqua;
    }
  

所有在 myFontFather下的p元素字体颜色都会生效，不在myFontFather下的都不会生效。

    <section>
        <div class="myFontFather">
            <div>
                <p>子二代</p>
                <div>
                    <p>子三代</p>
                </div>
            </div>
            <p>子一代</p>
        </div>
        <p class="fontSon">我不是myFontFather的子代</p>
    </section>

效果：

子代选择器

5.分组选择器

分组其实就是不同的选择器共用相同的属性。

• 有各种选择器组成，中间由逗号(,)隔开。

• 所有在一起的选择器共用相同的属性。

    .divider{
        font-size: 12px;
    }
    label{
        font-size: 24px;
    }
    #setColor{
        font-size: 48px;
    }
    .divider, label, #setColor{
        color: #0000cc;
    }
  

字体大小不同，共用一个字体颜色：

    <section>
        <div>
            <span class="divider"> class-divider </span>
            <span> <label>label</label></span>
            <span id="setColor"> id </span>
        </div>
    </section>

效果： 分组选择器

6.ID选择器

• 以#开头进行命名
• 通过给HTML设置同名id引用
  这个就不举例子了，上面5中setColor就是一个ID选择器以及引用方式都有。

7.通用选择器

• 以*号标识

• HTML当中所有元素都会生效,不需要引用，只要文档加载了这个css

    *{// 让所有元素都没有padding和margin值
        margin: 0;
        padding: 0;
    }
  

8.补充一点：权值

• 标签选择器权值1
• 类选择器权值10
• ID选择器权值100
• 权值越高优先级越高，即优先加载权值高的样式。
• 同权值情况则使用就近原则，使用当前最近的一个选择器的样式。

9.ps:遗漏一种同胞选择器

• （标签1 + 标签2），两个标签选择器以 +(加号)相连接为紧邻同胞选择器，特点是标签2必须紧跟标签1之后。

• （标签1 ~ 标签2），两个标签选择符以 ~（波浪号）相连接为一般同胞选择器，特点是标签2跟在标签1之后但不一定是紧邻关系

    h1 + span {
        color: #0000cc;
        font-size: 40px;
    }
    h2 ~ span {
        color: #be1932;
        font-size: 24px;
    }
  

紧邻同胞选择器只有紧邻的第一个元素有效，一般同胞选择器则是同胞就有效果。

    <section>
        <h1>我是标签1</h1>
        <span>我是标签2且紧邻标签1</span>
        <span> 我是标签3，虽然不是紧邻标签1但是也是他的同胞啊</span>
    </section>
    <section>
        <h2>我是标签1</h2>
        <span>我是标签2且紧邻标签1</span>
        <span> 我是标签3，虽然不是紧邻标签1但是也是他的同胞啊</span>
    </section>

第一个section是紧邻同胞，所以标签三就没有获取样式，第二个section里是一般同胞选择，里面的2 3标签都可以获取样式。
效果：

同胞选择器

ps:有什么问题或者错误欢迎评论。