Help:CSS/选择器

来自滚动的天空Wiki

选择器(selector)是CSS中一个重要的概念。它指示样式规则应该应用于文档中的哪些元素,同时它也可以用于jQuery构造器和document.querySelector()对元素的搜索。

基本[编辑源代码]

选择器的最简单位有4种:

  • tagName。以字母开头的会被视为标签名字,如body表示选取文档<body>元素。
  • .className。以小数点开头的会被视为类名,如.mw-parser-output表示选取带有mw-parser-output类的所有元素。
  • #id。以井号开头的会被视为ID,如#mw-content-text表示选取id为mw-content-text的某个元素。一般地,在DOM中,一个存在的ID应当是某个元素独有的,不同元素有同一个ID是非法的。
  • *。一个单独的星号,被视为通用选择器,可以选择所有元素。

一般地,前三种可以通过以与的关系、以标签名、类名、id选择器的先后顺序进行组合。例如,div.navbox#nav-level表示选择id为nav-level、具有navbox类的div元素。不过,id选择器一般会单独出现,并且id和标签只能组合一个,但类名可以组合多个,如.navbox.navbox-list,因为一个元素不会有多个标签名字或id。另外,可以用逗号连接多个选择器,以或的关系进行分组,如ol, ul表示选取任意的有序和无序列表。

组合选择器[编辑源代码]

简单选择器之间可以使用组合器进行连接,以表达复杂的关系。组合器有下面4种:

  •  ,后代组合器(两个简单选择器之间一个及以上的空格,且没有其他非空格的字符)。表示选取的元素在前面选择器表示的元素中(后一个不一定是前一个的子元素)。例如,.navbox .navbox-list表示选取任意导航框中任意的列表元素;.navbox .navbox .navbox-list选取任意二级以上导航框中任意的列表元素。
  • >,子组合器(一个大于号)。表示选取的元素是前面的选择器表示的元素的子元素。例如,.mw-parser-output > p表示选取任意带有mw-parser-output的元素的直接后代。
  • +,相邻兄弟组合器(一个加号)。表示选取的元素直接紧挨在前面选择器表示的元素之后。例如,.navbox + .navbox表示选取任意一个前面紧挨有导航框的导航框元素。
  • ~,通用兄弟选择器(一个波浪线)。表示选取的元素在前面选择器表示的元素之后(不一定紧挨)。例如,.start ~ li表示选取带有start类的元素之后的所有同级列表元素。

一般地,书写组合器时,除后代组合器本身就是空格,其他选择器前后应加上空格以便阅读。

伪类[编辑源代码]

主条目:Help:CSS/伪类

伪类表示元素的特定状态,使用单冒号:表示,其名称不区分大小写。如li:first-child表示选取作为其父元素的第一个子元素的列表元素。有的伪类具有参数,有的则没有。

伪类一般书写在简单选择器的最后,但也有例外,比如:is()等选择器的书写位置取决于其参数的类型。

伪元素[编辑源代码]

主条目:Help:CSS/伪元素

伪元素用于设置元素指定部分的样式,使用双冒号::表示。如li::marker表示每个列表之前的标记。

使用[编辑源代码]

CSS[编辑源代码]

CSS样式规则定义需要用到选择器,以确定规则应用到的元素。

选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}

jQuery[编辑源代码]

主条目:Help:JQuery

jQuery可以用选择器构造一个含有特定元素jQuery对象。例如,$("#mw-content-text")表示构造一个jQuery对象,其中的元素带有idmw-content-text