应用思考-教育技术论坛

标题: CSS选择器笔记整理 [打印本页]

作者: etjyl 时间: 2011-8-12 22:07
标题: CSS选择器笔记整理
CSS选择器（又叫CSS选择符）是指实现一对一，一对多或者多对一的控制，HTML页面中的元素就是通过CSS选择器进行控制的。其实CSS选择器的作用就是选择或确定到底哪些元素进行CSS规则，其中class和id是最为重要的选择符，但是还有很多的其他的选择符，如：属性选择符、多元素组合选择符。

我觉得CSS选择器是学习CSS的第一步，虽然简单，但是很容易混淆，所以要求我们集中整理记忆，大家不懂可以跟帖询问！

一、基本选择器

序号	选择器	含义
1.	*	通用元素选择器，匹配任何元素
2.	P	标签选择器，匹配所有使用P标签的元素
3.	.info	class选择器，匹配所有class属性中包含info的元素
4.	#footer	id选择器，匹配所有id属性等于footer的元素

实例：

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

二、多元素的组合选择器

序号	选择器	含义
5.	E F	后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔
6.	E > F	子元素选择器，匹配所有E元素的子元素F
7.	E + F	近亲元素选择器，匹配所有紧随E元素之后的同级元素F

实例：

div p { color:#f00; }
#nav li { display:inline; }
#nav a { font-weight:bold; }

复制代码

三、属性选择器

序号	选择器	含义
8.	E[att]	匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。）
9.	E[att=val]	匹配所有att属性等于“val”的E元素
10.	E[att~=val]	匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
11.	E[att\|=val]	匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，比如“en”、“en-us”、“en-gb”等等

实例：

p[title] { color:#f00; }
div[class=error] { color:#f00; }
td[headers~=col1] { color:#f00; }
p[lang|=en] { color:#f00; }
blockquote[class=quote][cite] { color:#f00; }

复制代码

四、CSS 中的伪类

序号	选择器	含义
12.	E:first-child	匹配父元素的第一个子元素
13.	E:link	匹配所有未被点击的链接
14.	E:visited	匹配所有已被点击的链接
15.	E:active	匹配鼠标已经其上按下、还没有释放的E元素
16.	E:hover	匹配鼠标悬停其上的E元素
17.	E:focus	匹配获得当前焦点的E元素
18.	E:lang(c)	匹配lang属性等于c的E元素

实例：

p:first-child {
font-style:italic; }
input[type=text]:focus {
color:#000; background:#ffe;
}
input[type=text]:focus:hover { background:#fff; }
q:lang(sv) { quotes: "\201D" "\201D" "\2019" "\2019"; }

复制代码

五、CSS 中的伪元素

序号	选择器	含义
19.	E:first-line	匹配E元素的第一行
20.	E:first-letter	匹配E元素的第一个字母
21.	E:before	在E元素之前插入生成的内容
22.	E:after	在E元素之后插入生成的内容

实例：

p:first-line { font-weight:bold; color;#600; }
.preamble:first-letter { font-size:1.5em; font-weight:bold; }
.cbb:before {
content:""; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }
a:link:after { content: " (" attr(href) ") "; }

复制代码

作者: etjyl 时间: 2011-8-12 22:56
本帖最后由 etjyl 于 2011-8-12 22:56 编辑

etthink 发表于 2011-8-12 22:41
我觉得CSS选择器是学习CSS的第一步，虽然简单，但是很容易混淆。
我也觉得学CSS要明白两个事情：
1 CSS写 ...

我们在网页设计中可以用四种方法来导入CSS，如：行间样式表、内部样式表、外部样式表和@import等。我们在网页设计过程中一般最常用的是外部样式表，就是在单独的文件中写CSS样式，最后通过链接导入到我们的HTML代码中

作者: 红筹 时间: 2011-8-12 23:15
够专业，厉害！{:soso_e179:}

欢迎光临应用思考-教育技术论坛 (http://etthink.com/)