CSS3选择器

发表于 更新于 分类于

释义

  • （caseading style sheet、层叠式样式表）

前端三层

  1. 结构层 HTML
    • 搭建结构、放置部件、描述语义
  2. 样式层 CSS
    • 美化页面、实现布局
  3. 行为层 Javascript
    • 实现交互效果、数据收发、表单验证等

选择器（CSS2.1）

  1. 类选择器
    • .类名称
  2. id选择器
    • #id名称
    • 命名：只能有字母、数字、下划线、短横构成、且不能以数字开字母区分大小写，但习惯小写字母开头
  3. 元素选择器（标签选择器)
    • 元素名称
    • 通常用于标签样式的初始化
  4. 说明
    • 选择器的优先级：内联样式>id选择器>类选择器>元素选择器

复合选择器（CSS2.1）

  1. 后代选择器
    • .box .spec 选择.box 内部类名为.spec的标签
  2. 交集选择器
    • li.spec 选择既是li标签，名字也叫spec类的标签
  3. 并集选择器
    • ul,ol 选择所有ul和ol的标签
  4. 题目：请根据样式属性，写出文档结构
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
        div.box li p.spec em{
            color: red;
        }
        <div class="box">
        <ul>
            <li>
                <p class="spec"><em>哈哈哈哈</em></p>
            </li>
        </ul>
    </div>

属性选择器（CSS3） >= IE9

  1. img[alt]
    • 选择有alt属性的img标签
  2. img[alt=”故宫”]
    • 选择alt 属性是故宫的img标签
  3. img[alt^=”故宫”]
    • 选择alt属性以北京开头的img标签
  4. img[alt$=”夜景”]
    • 选择alt属性以夜景结尾的img标签
  5. img[alt*=”美”]
    • 选择alt属性包含美字的img标签
  6. img[alt~=”手机拍摄”]
    • 选择有alt属性有空格隔开的手机拍摄字样的img标签
  7. img[alt|=”参赛作品”]
    • 选择有alt属性以“参赛作品-”开头的img标签

元素关系选择器（CSS3）

  1. 子选择器>=IE7
    • div>p div的子标签p
  2. 相邻兄弟选择器
    • img+p 图片后面紧跟着的段落将被选中
  3. 通用兄弟选择器
    • p~span p元素之后的所有同层级span元素

序号选择器（CSS3）

  1. :first-child >=IE7
    • 第一个子元素
  2. :last-child
    • 最后一个子元素
  3. :nth-child(3)
    • 第三个子元素
    • :nth-child(3n+2) 从第二个开始，每三个选一个
    • 2n+1 等价于 odd ，表示奇数
    • 2n 等价于 even ，b表示偶数
  4. :nth-of-type(3)
    • 第三个某类型的子元素，将选择同种标签指定序号的子元素
  5. :nth-last-child(3)
    • 倒数第三个子元素
  6. :nth-last-of-type(3)
    • 倒数第三个某类型的子元素

原子类

  1. 在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等设置为单独的类
    1
    2
    3
     例如:
    .fs12{ font-size:12px }
    .color-red { color:red }

伪类

  1. 伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接有4个特殊状态
    1
    2
    3
    4
    a:link  没有被访问过的超级链接
    a:visited 已经被访问过的超级链接
    a:hover 正被鼠标悬停的超级链接
    a:active 正被激活的超级链接（按下按键但是还没有松开按键）
  2. “爱恨准则” LOVE HATE
    • :link -> :visited -> :hover -> :active
    • a 标签伪类必须按照这个写法，否则伪类不生效

伪元素（CSS3）

  1. ::before
    • 在元素之前创建
  2. ::after
    • 在元素之后创建
  3. ::selection
    • 用于文档中被用户高亮的部分（使用鼠标圈选的部分）
  4. ::first-letter
    • 选中某元素中（必须是块级元素）第一行的第一个字母
  5. ::first-line
    • 选中某元素中（必须是块级元素）第一行的全部文字

*层叠性和选择器权重计算

  1. 选择器的优先级：内联样式>id选择器>类选择器>元素选择器
  2. 复杂选择器可以通过（id的个数，class的个数，标签的个数）的形式，计算权重
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div id="box1" class="box1">
         <div id="box2" class="box2">
             <div id="box3" class="box3">
                 <p>我是段落</p>
             </div>
         </div>
     </div>
     #box1 #box2 p {
         color: red;
     }
     #box1 div.box2 #box3 p {
         color: green;
     }
     .box1 .box2 .box3 p {
         color: blue;
     }
     2,0,1
     2,1,2
     0,3,1

     <!-- id选择器个数，类选择器个数，元素选择器个数 -->
  3. !important 权重提升
    • 很多公司不允许使用 important ，因为这会带来不经意的样式冲突