CSS学习选择符

Posted 小兜兜me

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS学习选择符相关的知识,希望对你有一定的参考价值。

  1. 元素选择符:以元素名作为选择符(span{ color: red; })
  2. 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; })
  3. 通用选择符:通用选择符(*)将匹配所有元素(*{ color: red; })
  4. 类选择符:根据类名匹配元素(.类名{ color: red; })
  5. ID选择符:根据ID值匹配元素(#id{ color: red; })
  6. 属性选择符
    • 简单属性选择符:根据是否有这个属性匹配元素(span[class]{ color: red; })
    • 精准属性值选择:匹配属性为特定值的元素(精准字符串匹配)必须完全一致(span[class="urgent warning"]{ color: red; })
    • 根据部分属性值选择:以bar为例
      1. 属性以bar和一个英文破折号开头的,或者bar本身(span[class|="bar"]{ color: red; })
      2. 其值是包含bar的一组词(span[class~="bar"] { color: red; })
      3. 其值是包含子串bar(span[class*="bar"] { color: red; })
      4. 其值以bar开头(span[class^="bar"] { color: red; })
      5. 其值以bar结尾(span[class$="bar"] { color: red; })
  7. 后代选择符:选择所有符合条件的后代(span div { color: red; })
  8. 子代连接符:选择符合条件的子代(span > div { color: red; })
  9. 紧邻同胞连接符:选择同一个父元素中,紧跟在另一个元素后面的元素(span + div { color: red; })
  10. 一般同胞连接符:选择一个元素后面同属一个父元素的另一个元素(如例子:所有在span后面的div的color都是red) ( span~div { color: red; })
  11. 伪类选择符(伪类的效果是把某种幽灵类应用到伪类依附的元素上):
      1. 结构伪类
        • 选择根元素(:root):在html中文档的根元素永远都是html标签,但是在xml中,根元素就千奇百怪了
        • 选择空元素(:empty):可以使用empty伪类可以选择没有任何子代的元素,甚至连文本结点都没有(包括文本和空白)注释不算
        • 选择唯一子代(:only-child):匹配另一个元素的唯一子元素
        • 选择唯一某种子元素(:only-of-type):匹配同胞中唯一的那种元素
        • 选择第一个子代(:first-child):匹配一个元素的第一个子代
        • 选择最后一个子代(:last-child):匹配一个元素的最后一个子代
        • 选择第一个某种子元素(:first-of-type):匹配一个元素的第一个某种子元素
        • 选择最后一个某种子元素(:last-of-type):匹配一个元素的最后一个某种子元素
        • 选择第n个子代(:nth-child(an+b)):匹配第an+b个子代,a、b是常数,n为1、2、3......
        • 选择倒数第n个子代(:nth-last-child(an+b))匹配倒数第an+b个子代,a、b、n同上
        • 选择第n个某种子元素(:nth-of-type(an+b))匹配第an+b个某种子元素,a、b、n同上
        • 选择倒数第n个某种子元素(:nth-last-of-type(an+b))匹配倒数第an+b个某种子元素,a、b、n同上
      2. 动态伪类
        1. 超链接伪类
          • :link 匹配具有herf属性的锚点
          • :visited 匹配已访问的锚点(鉴于隐私保护,伪类中只有color属性才能生效,其它的都无效)
        2. 用户操作伪类
          • :focus 当前获得输入焦点的元素
          • :hover 鼠标指针放置其上的元素
          • :active 由用户输入激活的元素
        3. UI状态伪类
          • :enabled 接受输入的元素
          • :disabled 不接受输入的元素
          • :checked 由用户或文档默认选中的单选框或多选框
          • :indeterminate 既未选中也没有未选中的单选按钮或多选按钮
          • :default 默认选中的单选按钮、复选框或选项
          • :valid 满足有效性语义的输入框
          • :invalid 不满足有效性语义的输入框
          • :in-range 输入的值在最大值和最小值之间的输入框
          • :out-of-range 输入的值不在最小值到最大值之间的输入框
          • :required 指代必须输入值的输入框
          • :optional 指代无须一定输入值的输入框
          • :read-write 可由用户编辑的输入框
          • :read-only 不能由用户编辑的输入框
      3. :target伪类:给锚点(该锚点有id且网页中有url(片段标识符)指向此id)设置样式
      4. :lang伪类:根据文本使用的语言选择元素
      5. 否定伪类(:not(要选择的简单选择符)):相当于编程中的非操作,不满足要选择的简单选择符的时候,应用样式
        • tip:简单选择符:类型选择符、通用选择符、属性选择符、类选择符、ID选择符或伪类
  12. 伪元素选择符
    1. 装饰首字母(::first-letter)
    2. 装饰首行(::first-line)
    3. 装饰(或创建)前置和后置内容元素(::before ::after)

CSS学习笔记02

1.伪类选择符

叫做伪类选择符,允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色:

a:hover{color:red;}

上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。

 

2.分组选择符

 

当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,),如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色:

 

h1,span{color:red;}

 

以上是关于CSS学习选择符的主要内容,如果未能解决你的问题,请参考以下文章

css 学习笔记 一

css学习笔记 4

锋利的jQuery学习笔记之jQuery选择器

jQuery基础学习01 jQuery选择器

Js脚本之jQuery学习笔记

30个你必须记住的CSS选择符