选择器(selector)
文章同时发布于:个人网站—css模块。
CSS提供了几种方式,可以让开发者将css样式应用到指定的html元素。本节内容将会讲述这些方式。
一.CSS规则(rules)
首先,我们简单的看下css语法的结构,假设有如下css规则:
.class-rule {
background: red;
color: green;
}
上面是一个简单的css规则,它将类名为class-rule
的所有元素的背景色设置为红色,颜色设置为绿色。在css代码中,.class-rule
称之为选择器(Selector), 用于说明这个样式规则将应用于哪个元素。大括号之间包裹的内容是**属性声明(Declaration)**部分,一个规则可以有多个样式声明,例如上面中有两个声明,background和color。每个声明由属性名称(Property)和属性值(Value)组成。
二.简单选择器
简单选择器使用html元素的类型名(type)、类名(class)、属性(attribute)和Id指定元素。
通配选择器
**通配选择器(universal selector)**使用一个通配符号*
表示匹配所有元素。
* {
margin: 0;
padding: 0;
}
这个规则表示将所有元素的外边距和内边距都设置为0。一般在项目中,我习惯用这段代码,覆盖浏览器的默认样式,使元素初始边距为0。
类型选择器
类型选择器(type selector)也叫做标记选择器(tag selector),使用元素的tag名作为选择器。
p {
font-size: 18px;
font-weight: bold;
}
上面的规则将页面中所有的段落(paragraph)的字体设置为18px粗体。
类选择器
一个html元素可以有0个或者多个类名。
<p class="p1 bold">This is a statment.<p>
<p class="p2">This is a statment.<p>
我们可以使用类名作为选择器,来指定特定的html元素。为了区别类型选择器和类选择器,类选择器使用.
加上类名作为选择器名称。将以下规则用于页面:
.bold {
color: red;
}
页面中第一个段落文字将会显示为红色,因为.bold
表示这个规则应用于类名包含bold的元素。
ID选择器
一般html页面中,元素的ID是唯一的。虽然多个元素拥有相同的id,浏览器并不会报错,但是我们在写html时,也要遵循这个规范,保证所有元素的id都是唯一的。
可以使用id作为选择器,指定css规则应用的元素。为了使用id作为选择器,我们用符号#
放置于id前面,表示这是一个ID选择器。看下面的代码:
<p id="p1">This is first paragraph.</p>
<p id="p2">This is second paragraph.</p>
...
<style>
#p1 {
color: red;
}
#p2 {
color: blue;
}
</style>
p1会显示为红色,p2显示为蓝色。html的每个元素的id字段,不能像类名那样设置为多个,例如下面这样是错误的。
<p id="id1 id2">This is a paragrahp.</p>
属性选择器
html元素可以设置属性,例如上面的class和id都是html元素的属性,我们也可以添加更多的属性。
<p att1="1" att2="2" att3="3">This is a paragraph.</p>
属性选择器用中括号[attributeName='attributeValue']
表示,attributeName表示属性名称,attributeValue指示这个属性的值。例如,将包含属性att,并且属性值为attValue的元素的颜色改为红色,可以这样写:
[att='attValue'] {
color: red;
}
我们也可以,不设置属性值,那么这个规则就会被应用于所有含att属性的元素。
[att] {
color: red;
}
有一点需要注意的是,属性值不是大小写敏感的。如果选择器为[att='attValue']
, 那么下面两个元素都会应用这个规则:
<p att="attValue">This is a paragraph.</p>
<p att="ATTVALUE">This is a paragraph.</p>
可以在选择器中添加s
标记[att='attValue' s]
,表示此时属性选择器是大小写敏感的。默认情况是不分大小写的,也可以添加i
标记显示指定这个选择器非大小写敏感。
除了大小写敏感标记符号,你还可以指定属性值部分匹配元素属性值。
/* 匹配href属性值包含“example.com”的元素 */
[href*='example.com'] {
color: red;
}
/* 匹配href属性值以“https”开头的元素 */
[href^='https'] {
color: green;
}
/* 匹配href属性以“.com”结尾的元素 */
[href$='.com'] {
color: blue;
}
组合选择器
一个规则,并不一定只设置一个选择器,可以设置多个选择器,用逗号隔开即可。
p,
a,
#id,
.class {
color: red;
}
这个规则会匹配所有段落p
、所有链接a
、id为id
的元素和所有类名为class
的元素,我们称这种选择器为组合选择器。
三. 伪类和伪元素
伪类
伪类(Pseudo-classes),使元素在不同状态下,应用不同的样式规则。例如,当鼠标悬浮在元素上时,可以使用:hover
指定规则应用于这个状态。
// 当鼠标悬浮在段落p上时,颜色为红色
p:hover {
color: red
}
后面我会补充关于伪类更多的细节,这里只做简单的介绍。
伪元素
伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特定部分修改样式。使用伪元素,就好像你在html页面中插入了一个新的元素。伪元素用双冒号::
表示。
.my-element::before {
content: 'Prefix - ';
}
这个规则,会应用到类名为my-element
的元素,在该元素前插入Prefix-
文字。也可以使用::after
修改元素后面的样式。
还可以使用::marker
修改某些标记,例如修改无序列表前面的点或者有序列表前面的数字样式。使用::selection
修改用户选择某段文字后显示的样式。
li::marker {
color: red;
}
p::selection {
background: green;
color: white;
}
四.复杂选择器
组合器
**组合器(combinator)**是位于两个选择器中间的符号,例如div>p
中>
就是一个组合器。组合器有以下几种:
- 后代选择器 : 用空格(
)表示,匹配父元素后代子孙节点中的元素,例如
div p
匹配div中所有的段落,不一定是儿子结点,也可以是孙子结点。 - 相邻下一个兄弟节点:用
+
表示,匹配同级节点的紧邻下一个元素。例如div+p
匹配div后面与该div紧邻着的段落,p与div之间不能有其他元素。 - 后面所有的兄弟节点:用
~
表示,匹配同级节点的后面的元素,不要求是紧邻的元素。例如div~p
匹配div后面所有同级的<P>
元素。 - 子选择器:用
>
表示,匹配某个元素的孩子结点。例如div>p
表示div中所有p孩子元素。
复合选择器
你可以组合多个选择器,增强代码的可读性和规则的功能。例如,你想将规则应用于类名为cls
的<a>
元素,将其颜色设置为红色,可以这样写:
a.cls {
color: red;
}
注意,与组合器不同的是,复合选择器在选择器之间不包含任何符号和空格。
附:参考资料
(完)。