复杂选择器、内容生成

1. 复杂选择器

• 选择器作用: 匹配 页面的元素

1.1. 兄弟选择器

• 兄弟: 具备 同一 父元素的 平级元素 称之兄弟元素

1.1.1. 相邻兄弟选择器

• 相邻: 挨着的

  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  

• 语法: 选择器1 + 选择器2

• div+div{ color:red; } /* d2, d3 的颜色为  red  色  */
  

1.1.2. 通用兄弟选择器

• 通用: 后面所有
• 语法: selector1 ~ selector2

注意: 只能向后找兄弟, 不能向前找兄弟

1.2. 属性选择器

1.2.1. 什么是属性选择器

• 允许通过 元素所附带的属性 及其 值来匹配页面元素

1.2.2. 语法

• 基础语法规范: []

1. [attr]: 匹配页面中附带 attr 属性的所有元素

   • EX: 1. [id]: 匹配页面中所有 有 id 属性的元素 2. [type]: 匹配页面中所有 有 type 属性的元素 3. [disabled]: 匹配页面中所有被禁用的元素

2. elem[attr]: 匹配 具备 attr 属性的 elem 元素

   • elem: 表示 任意 元素
   • attr: 表示 任意 属性
   • EX: div[id]: 匹配页面中所有 附带 id 属性的 div 元素

3. [attr1][attr2]: 匹配 同时具备 attr1 以及 attr2 属性的元素

   • EX: input[class][type]: 匹配页面中所有 有 class 的文本框元素

4. [attr=value]: 匹配页面中所有 attr 属性值为 value 的元素

   • EX: 1. [id='parent']: 等同于 #parent 2. [class="container"]: 等同于 .container 3. [type='text']: 匹配页面中所有的文本框 4. [type='submit']: 匹配页面中所有的提交按钮

5. [class~=value]: 匹配的元素的 class 属性值是由多个类选择器组成的列表, value 是该列表中的一个独立选择器 -> 即: 匹配选择器列表中包含value选择器的元素

6. [attr ^= value]: 匹配 attr 属性值 是以 value 字符作为开始的元素

   • ^=: 以 ... 作为开始

   • EX:

     <div class="col-sm-3"></div>
     <div class="col-md-6"></div>
     

     div[class^=col]: 匹配 class 属性值中 是以 col 作为开始的div元素 -> 上面的两个选择器都会被匹配上

7. [attr *= value]: 匹配 attr 属性值中 包含 value 字符的元素

   • *=: 包含...字符

   • EX:

     <div class="col-md-1"></div>				
     <div class="col-md-12"></div>
     <div class="col-sm-12"></div>
     <div class="col-sm-1"></div>
     

     div[class*=md]{}: 匹配 class 属性值中 包含 md 的所有 div 元素 -> 上面的元素只有第一个和第二个被匹配上

8. [attr $= value]: 匹配 attr 属性值 是以 value 字符作为结尾的元素

   • $=: 以 ... 作为结束

1.3. 伪类选择器

1.3.1. 目标伪类

• 作用: 突出显示 被激活的 HTML 锚点 元素
• 语法: :target / elem:target

1.3.2. 结构伪类

通过元素间的结构关系来匹配页面元素

• 语法: 1. :first-child: 匹配 属于其 父元素中的 首个子元素

  2. :last-child: 匹配 属于其 父元素中的 最后一个子元素

  3. :nth-child(n): 匹配 属于其 父元素中的 第n个子元素

     • EX: 获取表格 第二行 里的 第三列, 背景颜色改为 红色
       • 第二行: tr:nth-child(2)
       • 第三列: td:nth-child(3)
       • 第二行 第三列: tr:nth-child(2) td:nth-child(3)

  4. :empty: 匹配每个没有子元素( 包含文本 )的元素

     • EX: 1. <div><p></p></div>: 非 empty 的 div

       2. <div>Hello World</div>: 非 empty 的 div

       3. <div></div>
          

          非 empty 的div

       4. <div id=""></div>: 纯 empty 元素

  5. :only-child: 匹配 属于其父元素中的 唯一子元素

1.3.3. 否定伪类

• 作用: 将 指定选择器匹配的元素 排除出去
• 语法: :not(selector)
  • EX: #tbl tr:not(:first-child){}: 获取 除第一行以外的 所有行

1.4. 伪元素选择器

1.4.1. 伪类 和 伪元素的区别

• 伪类: 匹配的是元素( 不同状态或结构的 )
• 伪元素: 匹配的是元素中的一部分内容( 首字符、首行文本 )

1.4.2. 语法

1. :first-letter 或 ::first-letter: 匹配 某元素的 首字符
2. :first-line 或 ::first-line: 匹配 某元素的 首行文本
3. ::selection: 匹配 被用户选取的 部分

1.4.3. : VS ::

• 在 CSS3 之前, 伪元素 使用的是 :
  • :first-letter、:hover
• 在 CSS3 之后, 伪元素 一律使用 ::
  • ::first-letter、::focus

2. 内容生成

1. 什么是内容生成

通过 CSS 的属性和选择器, 向某元素内增加一部分内容

2. 伪元素选择器

• :before 或 ::before: 匹配 某元素的内容区域之前
  • <div>(内容区域之前) 这是一个div</div>
• :after 或 ::after: 匹配 某元素的内容区域之后
  • <div>这是一个div (内容区域之后) </div>

3. 语法:

   • 属性: content
   • 取值: 1. 字符串: 一系列的文本字符, 用 "" 或 '' 引起来 2. 图像: 提供图像地址 -> url(路径) 3. 计数器

4. 解决问题:

   1. 浮动元素父元素高度

      .clear:after{
        content: ""; /*生成空内容(元素)*/
        display: block; /*变为块级*/
        clear: both; /*清除浮动影响*/
      }
      

   2. 上外边距溢出

      div:before{
        content: '';  /*生成空元素*/
        dispay: table; /*表现形式为 table*/
      }
      

5. 计数器:

   • 什么是计数器

     使用 CSS 动态生成一组 有序的数组并插入到元素中

   • 语法:

     • 属性:

       1. counter-reset

          • 作用: 声明或重置计数器

          • 语法: 1. 声明一个计数器: counter-reset: 名 初始值;

            2. 声明多个计数器: counter-reset: 名1 值1 名2 值2 ......;

          • 注意: 1. 初始值可以省略不写 默认为 0

            2. counter-reset 不能放在使用的元素中声明 大部分情况下, 可以将计数器声明在使用元素的父元素上( 结合实际情况考虑 )

       2. counter-increment

          • 作用: 指定计数器每次出现的增量 -> 每次出现的计数器值的变化范围

          • 语法: 1. 指定一个计数器: counter-increment: 名 增量;

            2. 指定多个计数器: counter-increment: 名1 增量1 名2 增量2 ......;

          • 注意:

            1. 增量值可以为正, 也可以为负, 可以省略
               • 为正: 递增
               • 为负: 递减
               • 省略: 默认增量为1
            2. 哪个元素使用计数器, 就在哪个元素中设置计数器增量

       • 函数: counter()

         • 作用: 1. 在指定元素中, 使用计数器的值

           2. 必须要配合 countent 属性一起使用
           3. countent 要配合这 :before 或 :after 一起使用

         • 语法:

           selector:before{ countent: counter(名 增量); }
           /* 或者 */ selector:after{ countent: counter(名 增量); }
           

   • EX:

     • HTML 代码

       <h1>Web 基础知识</h1>
       <h1>HTML 快速入门</h1>
       <h1>网页中的文本</h1>
       

     • CSS 代码

       body{ counter-reset: chapter; }
       h1:before{ content: '第' counter(chapter) '章' }
       h1{ counter-increment: chaper; }
       

     • 显示效果