Help:CSS/选择器
来自滚动的天空Wiki
< Help:CSS
选择器(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