【原创】HTML&CSS学习笔记（12） ----CSS的基础语法:选择器 selector

 

一 CSS基础语法格式

选择器   {  color:red;        //声明语句1

}

 

二 什么是选择器  selector

选择器，就是选择html里的哪些内容，适用CSS的格式

可以选择的内容很多，可以是元素，或 id 或类等等

可以选择的方式很多，可以是一类，可以是父子相邻的，可以是组合的

 

 

三 选择器，按选择的内容区分

• 元素选择器     div                 //实际上选择的也是一类
• 类选择器        .class           //选择的定义在css里的那一类 class=""
• id选择器         #id              //1个网页里特指1个
• 属性选择器        [type]    img[width]
• 属性和值选择器 
•  img[width="300"]
•  img[alt~="flowers"]    //正则，包含flowers的都算
• 伪类选择器      a:hover     //就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover
• 伪元素选择器    p:first-child  p:first-letter
• 全局选择器   *    //选择所有元素
• 字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 

一个元素可以 有多个类 <p class="tea" class=”greentea  tea” >

最详细的选择器分类参考文档

http://www.w3school.com.cn/cssref/css_selectors.asp

 

 

四 选择器，按符合方式分

我自己写的，不过这么区分的意义好像不大...

• 纯单一选择器：就是只指定一种选择方式的
• 组合选择器：多种选择的内容，进行组合而成的

 

五 选择器，按选择的方式分类

关键词

.      // 类关键词

#     // id关键词

[]     //属性关键

a:hover      //伪类 

p:first-line  //  伪元素选择器

 

• 严格符合选择器                                  //直接连着写，不带空格
• div#greentea                                       //必须是满足id为greentea的div 

 

• 继承选择器/后代（子孙）选择器        //(以空格分隔)

            div   h1    /                       /div 多层下级的所有h1都符合要求

           

• 子元素选择器                      //(以大于号分隔）
• 子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

           div>h1                              //div纯下级的h1才符合要求

• 相邻兄弟选择器                 //（以加号分隔）
• 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素

         div+p                               //选取了所有位于 <div> 元素后的第一个 <p> 元素

• 普通兄弟选择器                //（以波浪线号分隔）
• 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

        div~p                             //选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

     

• 合并(组合)选择器                       //（逗号分隔）

        h1,h2                             //合并选择器，2个都包含

 

 

六 详细解释选择器

 

6.1 id选择器（id可以不是数字！）

• id选择器，只会与一个html里的一个元素匹配，因为id要求在一个html是唯一的！
• 一个页面内，ID唯一不可重复
• id不能以数字开头？不能有空格
• 但不同页面中，ID可能指不同页面的不同元素
• id 可以和 元素/类 进行组合为新的选择器   

#id

p#id

h1#id

#id.class

section#main

 

6.2 类选择器

• 一个元素可以有1个ID ，也属于一个类
• id更加专有一些，不能滥用
• 类也不能滥用，会造成其他地方重用这个类，而不是唯一的ID
• 类是给一组元素， 应用一个或多个样式属性
• 类可以和元素组合

.footer      {}

p1.footer  {}

 

 

6.3 选择器的合并规则

通行的选择器合并原则：把相同的规则合并为符合选择器，而自身独特的部分单独写

写法1 

        h1,h2

        h1

        h2

原则上要把相同类型进行合并,这样方便修改

 

6.4 伪类和nth-child伪类的技巧

其他div内也可以用到

p:nth-child(2n)      {background-color:red;}

p:nth-child(2n+1)  {background-color:green;}

 

 

七 选择器优先级

越具体的越有限，越靠上的越优先

1. 行内css
2. 内置css （ <style>内的）
3. 外部css   （<link=>）
4. 浏览器默认规则
5. 子类的优先，如果自身没有规则，会默认继承父辈的规则，继承！