CSS选择器

CSS基础选择器

• 选择器
  • 基础选择器--由单个选择器组成
    • 标签选择器
    • 类选择器
    • id选择器
    • 通配符选择器
  • 复合选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定
统一的 CSS 样式

• 作用
  • 标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签
• 优点
  • 快速为页面同一类型标签设置样式
• 缺点
  • 不能差异化设置样式

类选择器

• 作用：单独选一个或者某几个标签

• 语法：样式点定义 结构类(class)调用 一个或多个 开发最常用

.类名 { 
    属性1: 属性值1;   
    ... 
 }  

.red { 
   color: red; 
 } 

• 注意
  • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）
  • 长名称或词组可以使用中横线来为选择器命名
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示
• 多类名--节省CSS代码 统一修改也方便
  • 在标签属性中写多个类名
  • 多个类名必须用空格隔开

id选择器

• 作用：HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义
• 口诀：样式#定义,结构id调用, 只能调用一次, 别人切勿使用
• 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用

 #id名 { 
    属性1: 属性值1;   
    ... 
 } 
 
  #nav { 
   color:red; 
 } 

id 属性只能在每个 HTML 文档中出现一次

通配符选择器

• 作用：在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）
• 通配符选择器不需要调用， 自动就给所有的元素使用样式

 * { 
 
    属性1: 属性值1;   
    ... 
 } 
 
 * { 
    margin: 0; 
    padding: 0; 
}  

总结

CSS复合选择器(高效准确)

• 由两个或多个基础选择器，通过不同的方式组合而成的
• 分类：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器(包含选择器)(重要)

• 功能：可以选择父元素里面子元素

元素1 元素2 { 样式声明 }

ul li { 样式声明 }  /*  选择 ul 里面所有的 li标签元素  */ 

• 注意
  • 元素1 和 元素2 中间用空格隔开
  • 元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可

子选择器(亲儿子选择器)重要

• 功能：只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素

元素1 > 元素2 { 样式声明 } 
/*选择元素1 里面的所有直接后代(子元素) 元素2*/

div > p { 样式声明 }  /*  选择 div 里面所有最近一级 p 标签元素  */

• 元素2 必须是亲儿子，其孙子、重孙之类都不归他管

并集选择器 重要

• 功能：选择多组标签, 同时为他们定义相同的样式。通常用于集体声明

元素1,元素2 { 样式声明 } 

ul,div { 样式声明 }  /*  选择 ul 和  div标签元素  */ 

伪类选择器

• 功能：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
• 分类
  • 链接伪类
    • a:link 选择未被访问链接
    • a:visited 选择已被访问链接
    • a:hover 选择鼠标指针上的链接
    • a:active 选择活动链接(鼠标按下未弹起的链接)
    • 注意
      • 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active
      • 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
  • 结构伪类

:focus 伪类选择器

• 功能：：focus 伪类选择器用于选取获得焦点的表单元素

input:focus {  
   background-color:yellow; 
 }