5. CSS 选择器

• 官方选择器类型
  • http://www.w3school.com.cn/cssref/css_selectors.asp

1、元素选择器

• 又称为类型选择器（type selector）
• 文档的元素就是最基本的选择器。
• 设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。

2、ID选择器

• 允许以一种独立于文档元素的方式来指定样式。
• 前面有一个 # 号 -，也称为棋盘号或井号。

    
    
    


    哈哈哈哈哈哈
    呵呵呵呵呵呵

• 每个元素都可以设置id属性
• 同一个界面id的名称不能重复
• 编写元素属性时候id前面必须加上要加#
• id的名称只能由字母/数据、下划线组成
• id名称不能以数字开头
• id不能是html的标签名称：a h1 img input
• id前段开发一般都是留给js使用，不用于设置样式

3、类选择器

• 类选择器允许以一种独立于文档元素的方式来指定样式。
• 根据类名称找到对应的标签，设置属性指定样式。

    
    
    


    嘿嘿呵呵呵呵

• class名称可以重复
• 编写时要加上.
• 命名规范跟id选择器一样
• 专门给标签设置，这个跟ID选择器不一样
• 可以同时绑定多个标签
• 多类选择器
  • 例如：给一个特定的元素同时标记为重（important）和警告（warning）

    
    
    


    
嘿嘿呵呵呵呵
    
哈哈哈哈哈哈哈
    
哈哈哈哈哈哈哈

• class=“类名1”“类名3”“类名3”... 可以放n个类名
• important warning两个词的顺序无关紧要，写成 warning important 也可以。

    
    
    


    
第一个
    
第二个
    
第三个

4、后代选择器

• 后代选择器（descendant selector）又称为包含选择器。

    
    
  


    

        赤橙黄绿青蓝紫-黄出来
        赤橙黄绿青蓝紫-赤出来
    

• 去div找到p1再找到em
• 两个元素之间的层次间隔可以是无限的

  
List item 1
    

      
List item 1-1
      
List item 1-2
      
List item 1-3
        

          
List item 1-3-1
          
List item 1-3-2
          
List item 1-3-3
        
      
      
List item 1-4
    
  
  
List item 2
  
List item 3

5、子元素选择器

子元素选择器（Child selector），只选择某个元素的子元素，而不是选择任意的后代元素，只要子一代的子元素。

    
    
    


    子辈红一代---孙辈红二代----曾孙辈红三代
    子辈红一代---孙辈红二代----曾孙辈红三代

子选择器使用了大于号（子结合符，两边可以有空白符，这是可选的。因此，以下写法都没有问题：

p1 > redR
p1> redR
p1 >redR
p1>redR

• 从右向左读，选择器 p1 > redR 可以解释为“选择作为 p1 元素子元素的所有 redR 元素”。

• 结合后代选择器和子选择器

table1.company1 tdh > pp

• 上面的选择器会选择作为 td 元素子元素的所有 p 元素，这个 tdh 元素本身从 table1 元素继承，该 table1 元素有一个包含company1的 class 属性。如下：

    
    
    


    黄色黑色红红红红白色紫色
    黄色黑色红红红红白色紫色
    黄色黑色红红红红白色紫色

6、相邻兄弟选择器

• 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
• 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
• 与子结合符一样，相邻兄弟结合符旁边可以有空白符。

h1 + p {margin-top:50px;}

• 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”，增加紧接在 h1 元素后出现的段落的上边距。

    


    
哈哈哈哈哈1

    
哈哈哈哈哈2
    

        
哈哈哈哈哈3

        
哈哈哈哈哈4
        
哈哈哈哈哈5
    

• p:first-child 选择属于父元素的第一个子元素的每个

  元素。

6、伪元素选择器

• 给指定标签内容前面添加一个子元素

标签名称::before{
属性名称:值;
}

• 给指定标签内容后面添加一个子元素
  标签名称::after{
  属性名称:值;
  }
• visibility:hidden隐藏添加的子元素
• display:block指定添加的子元素显示模式

0241D7FF-2FA2-49EF-AD55-7B9807B6F55A.png