你的位置:首页 > 网页设计

[网页设计]后端码农谈前端(CSS篇)第三课:选择器 (韩兆新)


一、选择器

1、ID选择器:

语法:
首先,ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。
请看下面的规则:

*#intro {font-weight:bold;}


与类选择器一样,ID 选择器中可以忽略通配选择器。前面的例子也可以写作:
#intro {font-weight:bold;}


这个选择器的效果将是一样的。

2、类选择器:

语法:
然后我们使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:

*.important {color:red;}


如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:
.important {color:red;}


3、元素选择器:

最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。
例如:

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


4、属性选择器:

属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题(title)的所有元素变为红色,可以写作:

*[title] {color:red;}


例子 2
与上面类似,可以只对有 href 属性的锚(a 元素)应用样式:
a[href] {color:red;}


例子 3
还可以根据多个属性进行选择,只需将属性选择器链接在一起即可。
例如,为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色,可以这样写:
a[href][title] {color:red;}


例子4
除了选择拥有某些属性的元素,还可以进一步缩小选择范围,只选择有特定属性值的元素。
例如,假设希望将指向 Web 服务器上某个指定文档的超链接变成红色,可以这样写:
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}


例子5
与例子4不同,我们还可以对属性值进行子串匹配。
规则如下:
类型描述
[abc^="def"]选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"]选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"]选择 abc 属性值中包含子串 "def" 的所有元素
例如:
a[href*="w3school.com.cn"] {color: red;}


5、后代选择器:

以父元素为范围选择后代元素。
例如:
如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:

h1 em {color:red;}


6、子元素选择器:

以父元素为范围选择子元素。
例如:
如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

h1 > strong {color:red;}


7、相邻兄弟选择器:

例如:
如果要设置紧接在 h1 元素后出现的段落字体为红色,可以这样写:

h1 + p {margin-top:50px;}


这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

二、选择器的优先级

我们知道择器指向的越准确,它的优先级就越高。
故,通常如下分配权值(权值越大优先级越高)。

选择器类型权值
!important[1,0,0,0]
ID选择器[0,1,0,0]
类选择器[0,0,1,0]
元素选择器[0,0,0,1]
属性选择器[0,0,1,0]

复合选择器的权值:
例:

#example em{color:red;} 


权值 = [0,1,0,1]

CSS 优先级法则:
A  选择器都有一个权值,权值越大越优先;
B  当权值相等时,后出现的样式表设置要优于先出现的样式表设置;
C  创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;
D  继承的CSS 样式不如后来指定的CSS 样式;
【注:“内联样式表的权值”仅小于!important,因为它是一路ID组合出来的。】

三、选择器分组:

假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:

h2, p {color:gray;}


提示:通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。