CSS其他选择器

 

序号 选择器 作用
1 id , * 选择指定元素中被用户选中的内容
2 逗号选择器 联合选择器
3 空格选择器 子孙(后代)选择器
4 >选择器 子选择器(不是子孙后代)
5 #NAME? 相邻兄弟选择器
6 [ ] 属性选择器

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:

html {
    color:black;
}
h1 {
    color:blue;
}
h2 {
    color:silver;
}

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式,ID 选择器前面有一个 # 号,例如:

#test {
    font-weight:bold;
}

另外,id可以用作派生选择器:

#emphasis em{
    color:red; 
    background:yellow;
}

与类不同,在一个 HTML 文档中,ID 选择器只能在文档中使用一次,并且不能结合使用,例如,不能这样使用:

#test#test {
    font-weight:bold;
}

而类选择器则可以(元素类名为test test,中间带有空格):

.test.test {
    font-weight:bold;
}

在 CSS 中,类选择器以一个点号显示:

.center {
    color: red;
}

和 id 一样,class 也可被用作派生选择器:

.color td {
    background-color: green;
}

和id不同,类可以分配给任何一个元素任意多的次数。如果不希望样式作用在其他具有共同类的元素上,那么可以结合元素选择器来使得样式只作用于自己想要作用的那个元素上,例如:

p.pcolor {
    color: red;
}

在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔,例如类名为the p的元素p,这时可以使用多类选择器(类名的顺序不限):

.p.the {
    background:blue;
}

带*号的为通配选择器,使用了通配选择器后,样式将作用于所有元素:

* {
    background-color: orange;
}

联合选择器不仅可以对元素选择器分组:

h2, p {
    color:gray;
}

还可以对id选择器分组:

#test1, #test2 {
    color:gray;
}

同样地,类选择器也可以分组:

.test1, .test2 {
    color:gray;
}

甚至可以混合分组:

.test1, #test2, p {
    color:gray;
}

后代选择器(descendant selector)又称为包含选择器,用来选择特定元素的后代。例如(在类heading范围内的所有em元素将应用样式):

#heading em {
    color:red;
}

或者:

h1 em {
    color:red;
}

在CSS中,后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时,内层的元素就成为外层元素的后代。如元素h1嵌在元素body内部,h1就是body的后代。而且,h1的后代em也是body的后代,就像家族关系。

如果你不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果你希望只选择id为div1的元素下的 p 元素,可以这样写:

#div1 > p {
    color:red;
}

这样一来,仅仅只有div1下的子元素被作用,而其他的子元素不受影响。

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。例如,如果要为紧接在 id为div1的 元素后出现的段落改变颜色颜色,可以这样写:

#div1 + p {
    color: red;
}

需要注意的是这个id为div1的元素与p元素必须为同级关系,否则将不起作用。

如果希望选择有某个属性的元素,而不论属性值是什么,可以使用属性选择器。例如把包含class属性的所有元素变为红色,可以写作:

*[class] {
    color:red;
}

当然也可以指定元素和其中的值,这样一来它仅作用于符合条件的元素:

div[class="example"] {
    color:red;
}

还可以根据多个属性进行选择,只需将属性选择器链接在一起即可:

a[href][id] {
    color:red;
}

但需要注意的是,属性与属性值必须完全匹配,否则将不起作用。

人已赞赏
CSS笔记

伪元素选择器

2020-2-4 13:05:17

CSS笔记

CSS选择器优先级

2020-2-4 14:18:42

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索