CSS选择器

CSS常用属性和它的选择器

什么是CSS：

• Cascading style Sheet层叠样式表，作用是用来修饰网页的外观

• CSS的语法：选择器{属性：属性值；属性：属性值；}undefined

css选择器

• 标签选择器：也称为元素选择器，就是用HTML标签作为选择器，作用是选取页面中同类标签

• 类选择器：用来选取页面中的一个或多个元素，分为两步

  a) 第一步：设置类名，格式<开始标签 class=”类名”></结束标签>

  b) 第二步：设置类的样式，格式：.类名{样式的声明}

• id选择器：用来选取页面中的一个元素，分为两步

  a) 第一步：设置id名，格式<开始标签 id=”类名”></结束标签>

  b) 第二步：设置id的样式，格式：#类名{样式的声明}

  c) id和类的区别

  ​ i. id的名称必须唯一，类名可以重复

  ​ ii. id的权重高于类的权重

  ​ iii. 类可以有多个值，值间用空格分隔

• 群组选择器：就是用逗号将多个选择器连接在一起，使它们应用同种样式

• 后代选择器：就是用空格将祖先元素和后代元素连接在一起，用来选取后代元素

• 子选择器：就是用大于号将父元素和子元素连接在一起，用来选取子元素

  如果需指定直接子元素的标签最好是用子选择器，需要区分开与后代选择器的区别

• 动态伪类选择器

  a) :link：超链接默认

  b) :visited：超链接被访问过后

  c) :hover：元素被鼠标已过时的效果

  d) :active：元素被激活时的效果

• 全局选择器：就是用*作为选择器，用来选取页面中的所有元素

• 属性选择器：就是利用标签的属性及属性值来选取页面中的元素

  a) [属性名]：利用属性名来选取页面中的元素

  b) [属性名1][属性名2]…：利用属性名（多个）来选取页面中的元素

  c) [属性名=”属性值”]：利用属性名和属性值来选取页面中的元素

  d) [属性名~=”属性值”]：用来选取页面中具有某个属性，且该属性具有某个属性值，如[class~=”a”]表示用来选取页面中具有class属性，且它的值中有a的

  e) [属性名|=”属性值”]：用来选取页面中具有某个属性，且该属性值以某个字符作为前缀（即表示属性值中有连字符，连字符前面的内容为要选取的内容）

  f) [属性名^=”属性值”]：用来选取页面中具有某个属性，且该属性的值以某些字符开头

  g) [属性名$=”属性值”]：用来选取页面中具有某个属性，且该属性的值以某些字符结尾

  h) [属性名*=”属性值”]：用来选取页面中具有某个属性，且该属性的值包含某些字符

• 交集选择器：所谓交集选择器就是将两个选择器连接在一起，用来选取这两个选择器能选取到的公共部分，常用形式有

  a) 标签选择器+属性选择器，如p[title=”hello”]

  b) 标签选择器+类选择器，如p.red

• 结构伪类选择器

  a) first-child：用来选取结构中的第一个元素，格式：结构名称 匹配对象:first-child{样式声明}

  b) last-child：用来选取结构中的最后一个元素，格式：结构名称 匹配对象:first-child{样式声明}

  c) nth-child(编号)：用来选取结构中正数第n个元素，格式：结构名称 匹配对象:nth-child(编号){样式声明}

  d) nth-last-child(编号)：用来选取结构中倒数第n个元素，格式：结构名称 匹配对象:nth-last-child(编号){样式声明}

  e) first-of-type：用来选取结构中的第一个符合某类型的元素，格式：结构名称 类型:first-of-type{样式声明}

  f) last-of-type：用来选取结构中的倒数第一个符合某类型的元素，格式：结构名称 类型:last-of-type{样式声明}

  g) nth-of-type(编号)：用来选取结构中正数第n个符合某类型的元素，格式：结构名称 类型:nth-of-type(编号){样式声明}

  h) nth-last-of-type(编号)：用来选取结构中倒数第n个符合某类型的元素，格式：结构名称 类型:nth-；last-of-type(编号){样式声明}

  i) 注意：编号为odd时表示奇数，为even表示偶数

• 伪元素选择器

  a) :first-letter：用来选取某个元素的第一个字符，格式：元素:first-letter{样式声明}

  b) :first-line：用来选取某个元素的第一行字符，格式：元素：first-line{样式声明}

  c) :before：用来在某个元素前面插入内容，常和content结合使用，格式：元素:before{content:”内容”}

  d) :after：用来在某个元素后面插入内容，常和content结合使用，格式：元素:after{content:”内容”}

• UI元素状态伪类选择器

  a) :enabled：用来选取页面中可以用的表单元素，格式元素:enabled{样式声明}

  b) :disabled：用来选取页面中不可用的表单元素，格式元素:disabled{样式声明}

• 其它

  a) 通用兄弟选择器E~F：作用是用来选取E后面的所有的F，注意E和F是兄弟关系

  b) 通用兄弟选择器E+F：作用是用来选取E后面的第一个F，注意E和F是兄弟关系

  c) :root：作用是用来选取页面的根元素，即html标签

  d) :empty：作用是选取页面中的空元素，格式匹配对象:empty{样式声明}

  e) 否定伪类选择器:not：作用是用来否定某个元素（即排除某个元素），格式元素名称:not(要排除的元素){样式声明}

  f) :target：用来选取页面中的锚点

选择器的权重

​ a) 标签选择器的权重为0001

​ b) class选择器的权重为0010

​ c) id选择器的权重为0100

​ d) 属性选择器的权重为0010

​ e) 伪类选择器的权重为0010

​ f) 伪元素选择器的权重为0010

​ g) 包含选择器的权重：所包含选择器的权重之和

​ h) 子选择器的权重：所包含选择器的权重之和

​ i) 交集选择器权重为选择器之和

​ j) 继承样式的权重为0000

​ k) 行内样式的权重为1000