首页 > 代码库 > css 选择器种类

css 选择器种类

  1. 类型选择器:选择某一种类型的所有元素.类型选择器是指不带小于号或大于号的元素名称.如:div,img等
  2. 类选择器:选择指定某个类的所有元素.类选择器的格式是英文句号后面加上类名.如:  .myclass{}
  3. id选择器:选择文档中指定id的所有元素.每一个元素只有一个id,而且必须在文档中保持唯一.
  4. 属性选择器:  
    1. 属性存在性选择器:可用于选择包含指定属性的元素.属性选存在性选择器的格式是总括号内加属性名.例如:p[title]可以选择所有含有title属性的p元素.有些浏览器不识别空属性如<p title=""></p>
    2. 属性单词选择器:可用于选择在指定属性中包含指定单词的元素.例如p[title~="mytitle"]能够选择title属性中包含单词mytitle的所有p元素单词之间必须有空格隔开,字符区分大小写.如<p title="this is mytitle"></p>
    3. 属性值选择器:可用于选择指定属性中包含指定的元素.属性值选择器.如p[title="#4 mytitle"]可以选择title属性值正好是#4 mytitle的所有p元素.字符区分大小写,必须包括空格在内完整的属性值
  5. 伪元素选择器:first-letter,first-line称之为伪元素选择器,因为他们只选择元素的一部分内容,而非元素的所有内容.换言之,他们创建了一个伪元素.如:p:first-line{},选择p元素下面的第一行内容.
  6. 伪类选择器:仅适用于超链接.a:hover,a:link,a:visited,a:active,a:focus.(css2.1定义了另外两个伪类选择器:fist-child,lang().css3又定义了nth-child(n-1)等伪类选择器,而且可以把伪类选择器用到除超链接外的其他标签上)
  7. 子类选择器:使用通配选择器,加一个点,加上基类名称,再加一个点.最后是子类名称,可以选择所有设置了基类的元素.这就睡串联类.串联类可以有无限个,建议基类在前,子类在后,串联类不必具有相关性,但是将他们按类和子类划分可以增加代码的逻辑性.如:.class.subclass.etc{}

css 选择器种类