黑马程序员技术交流社区

标题: 【成都校区】CSS复合选择器 [打印本页]

---

作者: 小蜀哥哥    时间: 2019-11-28 17:23
标题: 【成都校区】CSS复合选择器


1 后代选择器

可以选择父元素里面的任何后代元素， 元素之间用空格隔开

        语法：

/*父元素 后代元素 { 样式声明 }*/
ul li {
    color: red;
}
ul li a {
    color: blue;
}2 子选择器

子选择器只能选择父元素的最近一级子元素，不考虑孙子元素。可以理解为亲儿子选择器。元素之间用‘>’隔开

        语法：

/*父元素>子元素*/
div>a {
    color: red;
}3 并集选择器

选择多组标签，设置统一的样式。通常用于集体声明。元素之间用逗号隔开

        语法：        

/*元素1,元素2*/
div, p {
    width: 300px;
}4 伪类选择器

用于给某些选择器添加特定的效果，或者快捷的选定某类元素。最大特点是用冒号':'表示

• 链接伪类选择器
  
  
  • 用于获取链接元素
    
    
  /*未访问过的链接*/
  a:link {
      color: black;
  }
  /*已访问过的链接*/
  a:visited {
      color: orange;
  }
  /*鼠标移入状态*/
  a:hover {
      color: red;
  }
  /*激活状态（按下鼠标未松开的状态）的链接*/
  a:active {
      color: skyblue;
  }
  ​
• 链接伪类实际使用
  a {
      color: black;
  }
  a:hover {
      color: red;
  }
• :focus伪类选择器
  
  
  • 用于获取表单元素
    
    
  /*当光标在输入框上的时候*/
  input:focus {
      background-color: pink;
  }
  

5 复合选择器总结
6 交集选择器

选择一类特定的标签。标签元素和类名之间以点号隔开

语法：

/*标签元素.类名*/
p.class1 { //类名为class1的所有p元素
    color: red;
}

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2