八类常用css选择器

CSS

• 样式层叠表（Cascading Style Sheets）
• 作用：通过设置标签的样式来美化页面

八类常用css选择器

用来解决需要在众多标签中选择部分标签设置样式的技术

1. 标签选择器

• 特点：使用标签的名称作为选择符，匹配文档中所有的标签

  也会作用后代和子代标签

• 语法：标签｛样式：值｝

• 示例：

  b{color:green;}
  
  <b>加粗</b>
  

2. 类选择器

• 特点：通过类元素的class属性值进行匹配样式

• 语法：.class名｛样式：值｝

• 示例：

   <style>
   .king{color:purple;}
   </style>
  
   <p class="king">曹操</p>
   <div class='king'>孙权</div>
  

3. id选择器

   id是用来表示该标签在网页的标志，具有唯一性

• 特点：针对标签的id属性值进行匹配样式

• 语法: #id值｛样式：值｝

• 示例：

   #girl{color:gold;}
  
   <div id="girl">貂蝉</div>
  

4. 群组选择器

• 特点：同时设置多个标签选择器相同的特性

• 语法：选择器1，选择器2，选择器3{样式：值}

• 示例：同时对多个标签作用

   b,.king,#girl{background-color:grey}
  
   <b>关羽</b><br>
       <u>张飞</u>
       <p class="king">曹操</p>
       <div class='king'>孙权</div>
       <div id="girl">貂蝉</div>
  

5. 后代选择器

• 特点：依托于元素的后代关系匹配元素（包含后代和子代）

• 语法：#id属性值 后代标签｛样式：值｝

• 示例：后代选择器对div标签的子标签和孙子标签同时作用，子代选择器只对div标签的子标签作用

      <style>
          div .grandson{background-color:grey;}
          div>p{font-size:30px}
      </style>
  
      <div>
          <p class='grandson'>儿子</p>
          <div><p class='grandson'>孙子</p></div>
      </div>
  

6. 子代选择器

• 特点：依托于元素的子代关系匹配样式，只匹配子代元素

• 语法：#id属性值>选择器｛样式:值｝

• 示例：如上个示例

7. 类名结合标签使用

• 特点：匹配标签中特定类的样式
• 语法: 标签.类名｛样式：值｝

8. 伪类选择器

• 特点：根据标签不同状态设置样式

• 应用：

  • 超链接：

  状态	语法
  访问前	a:link{样式：值}
  访问后	a:visited{样式:值}
  鼠标滑过	a:hover{样式:值}
  鼠标点击	a:actived{样式:值}
  设置顺序	爱恨原则（LoVe HAte）

  • 其他标签：只拥有两种状态,鼠标滑过和鼠标点击

样式表的特征

1. 继承性

   后代元素都会继承父元素的样式

2. 层叠性

   允许给元素定义多个样式，多个样式共同起作用

3. 优先级

   • 默认样式，优先级最低

   • 文档内嵌/外链样式

   • 行内样式，优先级最高

选择器的权重

• 每个选择器都有权重，权重是一个数值
• 权重值越大优先级越高

选择器	权值
标签选择器	1
类/伪类选择器	10
id选择器	100
行类选择器	1000

后代，子代。。。等复杂的选择器，权值取决于各项取值之和