- 浏览: 1522839 次
- 性别:
- 来自: 厦门
文章分类
- 全部博客 (516)
- Java (49)
- Java/Struts 2.0 (25)
- Java/Spring、Spring MVC (11)
- Java/Quartz (3)
- Java/Lucene (6)
- Java/Hibernate (19)
- Java/openJPA (7)
- Java/DWR (7)
- Java/Security、Spring Security/OAuth2 (6)
- Java/Threading (9)
- Java/XML (22)
- java/design pattern (4)
- Android (2)
- JavaScript (46)
- jquery (3)
- DB/MySQL (23)
- DB/Oracle (16)
- PHP (25)
- CSS (20)
- Linux (38)
- C/C++、DLL、Makefile、VC++ (31)
- 正则 (9)
- Eclipse (4)
- 安全、网络等概念 (25)
- 集群 (7)
- 网页 (5)
- 视频\音频 (1)
- HTML (6)
- 计算机数学/算法 (3)
- Virtualbox (1)
- LDAP (2)
- 数据挖掘 (6)
- 工具破解 (1)
- 其他 (13)
- Mail (1)
- 药材 (3)
- 游戏 (2)
- hadoop (13)
- 压力测试 (3)
- 设计模式 (3)
- java/Swing (2)
- 缓存/Memcache (0)
- 缓存/Redis (1)
- OSGI (2)
- OSGI/Gemini (0)
- 文档写作 (0)
- java/Servlet (3)
- MQ/RabbitMQ (2)
- MQ/RocketMQ (0)
- MQ/Kafka (1)
- maven (0)
- SYS/linux (1)
- cache/redis (1)
- DB/Mongodb (2)
- nginx (1)
- postman (1)
- 操作系统/ubuntu (1)
- golang (1)
- dubbo (1)
- 技术管理岗位 (0)
- mybatis-plus (0)
最新评论
-
pgx89112:
大神,请赐我一份这个示例的项目代码吧,万分感谢,1530259 ...
spring的rabbitmq配置 -
string2020:
不使用增强器 怎么弄?
OpenJPA的增强器 -
孟江波:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!4 ...
spring的rabbitmq配置 -
eachgray:
...
spring-data-redis配置事务 -
qljoeli:
学习了,楼主,能否提供一份源代码啊,学习一下,十分感谢!!!1 ...
spring的rabbitmq配置
一.选择符模式
模式/含义/内容描述
*
匹配任意元素。(通用选择器)
E
匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器)
E F
匹配元素 E 的任意后代元素 F 。(后代选择器)
E > F
匹配元素 E 的任意子元素 F 。(子选择器)
E:first-child
当元素 E 是它的父元素中的第一个子元素时,匹配元素 E 。(:first-child 伪类)
E:link E:visited
如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类)
E:active E:hover E:focus
在确定的用户动作中匹配 E 。(动态伪类)
E:lang(c)
如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的),则匹配该元素。(:lang() 伪类)
E + F
如果一个元素 E 直接在元素 F 之前,则匹配元素 F 。(临近选择器)
E[foo]
匹配具有”foo”属性集(不考虑它的值)的任意元素 E 。(属性选择器)
E[foo="warning"]
匹配其“foo”属性值严格等于“warning”的任意元素 E 。(属性选择器)
E[foo~="warning"]
匹配其“foo”属性值为空格分隔的值列表,并且其中一个严格等于“warning”的任意元素 E 。(属性选择器)
E[lang|="en"]
匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器)
DIV.warning
仅 HTML。用法同 DIV[class~="warning"]。(类选择器)
E#myid
匹配 ID 等于“myid”的任意元素 E 。(ID 选择器)
引用:
From:http://www.w3.org/TR/CSS2/selector.html
我们用下面的例子来解释“[s]父元素[/s]”、“[s]子元素[/s]”、“[s]父/子[/s]”及“[s]相邻[/s]”这几个概念。
<div title="这是一个div"> <h1>这是是h1的内容</h1> <p>这是一个段落p的内容!<strong>这里是strong的内容</strong>这是一个段落p的内 容!</p> </div>
从以上代码中,我们可以找出这样的关系:
[list]
[*] h1 和 p 同为 div 的“儿子”,两者分别同 div 形成“父/子”关系。
[*] h1,p,strong 都是 div 的“子元素”。(三者都包含在 div 之内)
[*] div 是 h1 和 p 的“父元素”。
[*] strong 和 p 形成“父/子”关系,strong 的“父元素”是 p 。
[*] 但 strong 和 div 并非“父/子”关系,而是“祖孙”关系,但 strong 依然是 div 的“子(孙)元素”。
[*] div 是 h1 p strong 三者的“祖先”,三者是 div 的“子(孙)元素”。
[*] h1 和 p 两者是相邻的。
[/list]
继承上面的实例来具体演示一下E F的关系:假如,我们需要将 strong 内的内容二字变为绿色,我们可以有哪些方法呢?
div strong {color:green;} /* - 正确。strong 是 div 的“子元素”*/ p > strong {color:green;} /* - 正确。strong 和 p 是“父/子”关系*/ div > strong {color:green;} /* - 错误!strong 虽然是 div 的“子(孙)元素”,但两者乃是“祖孙”关系,而非“父/子”关系,因此不能用 > 符号连接*/
临近选择器和通用选择器
:通用选择器以星号“*”表示,可以用于替代任何 tag 。
实例:
h2 + * { color:green }/*所有紧随 h2 的元素内的文字都将呈现红色*/
二.选择符分类介绍
1.通配选择符
语法:
* { sRules }
说明:
通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。
假如通配选择符不是单一选择符中的唯一组成,“*”可以省略。
示例:
*[lang=fr] { font-size:14px; width:120px; } *.div { text-decoration:none; }
2.类型选择符
语法:
E { sRules }
说明:
类型选择符。以文档语言对象(Element)类型作为选择符。
示例:
td { font-size:14px; width:120px; } a { text-decoration:none; }
3.属性选择符
语法:
E [ attr ] { sRules } E [ attr = value ] { sRules } E [ attr ~= value ] { sRules } E [ attr |= value ] { sRules }
说明:
属性选择符。
选择具有 attr 属性的 E
选择具有 attr 属性且属性值等于 value 的 E
选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格
选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E
示例:
h[title] { color: blue; } /* 所有具有title属性的h对象 */ span[class=demo] { color: red; } div[speed="fast"][dorun="no"] { color: red; } a[rel~="copyright"] { color:black; }
4.包含选择符
语法:
E1 E2 { sRules }
说明:
包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。
示例:
table td { font-size:14px; } div.sub a { font-size:14px; }
5.子对象选择符
语法:
E1 > E2 { sRules }
说明:
子对象选择符。选择所有作为 E1 子对象的 E2 。
示例:
body > p { font-size:14px; } /* 所有作为body的子对象的p对象字体尺寸为14px */ div ul>li p { font-size:14px; }
6.ID选择符
语法:
#ID { sRules }
说明:
ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。
示例:
#note { font-size:14px; width:120px;}
7.类选择符
语法:
E.className { sRules }
说明:
类选择符。在HTML中可以使用此种选择符。其效果等同于E [ class ~= className ] 。请参阅属性选择符( Attribute Selectors )。
在IE5+,可以为对象的 class 属性(特性)指定多于一个值( className ),其方法是指定用空格隔开的一组样式表的类名。例如:<div class="class1 class2">。
示例:
div.note { font-size:14px; } /* 所有class属性值等于(包含)"note"的div对象字体尺寸为14px */ .dream { font-size:14px; } /* 所有class属性值等于(包含)"note"的对象字体尺寸为14px */
8.选择符分组
语法:
E1 , E2 , E3 { sRules }
说明:
选择符分组。将同样的定义应用于多个选择符,可以将选择符以逗号分隔的方式并为组。
示例:
.td1,div a,body { font-size:14px; } td,div,a { font-size:14px; }
9.伪类及伪对象选择符
语法:
E : Pseudo-Classes { sRules } E : Pseudo-Elements { sRules }
说明:
伪类及伪对象选择符。
伪类选择符。请参阅伪类( Pseudo-Classes )[:link :hover :active :visited :focus :first-child :first :left :right :lang]。
伪对象选择符。请参阅伪对象( Pseudo-Elements )[:first-letter :first-line :before :after]。
示例:
div:first-letter { font-size:14px; } a.fly :hover { font-size:14px; color:red; }
发表评论
-
clear在CSS中的妙用
2009-12-24 21:53 1820在DIV + CSS设计网页中,经常需要设置多个DIV并列排 ... -
多浏览器测试的利器-IETester,自带IE5.5,IE6,IE7,IE8等多个内核.
2009-11-05 10:26 2109辛苦做出来的一个网站,到别人的电脑上显示得乱七八糟的,为啥?就 ... -
CSS IE 和 Firefox 的区别
2009-11-05 10:13 1451前言罗唆(其实很多时候没有区别,只是我们没弄好就变成区别了) ... -
第6章 文本属性==>文本缩进 P141
2009-06-05 22:27 959line-height 属性是指文本基线之间的距离,而不是字体 ... -
第6章 文本属性==>文本缩进 P135
2009-05-24 19:55 1237通过使用text-index属性,所有元素的第一行都可以缩进一 ... -
第5章 字体
2009-05-24 19:30 1236字体加粗:font-weight=>值:normal | ... -
第3章 结构和层叠 => 特殊性(优先级) P69
2009-05-03 07:40 1124对于每个CSS规则,用户代理(浏览器)会计算选择器的特殊性,并 ... -
CSS 样式学习库
2009-04-30 23:06 996CSS菜单库 http://www.dynamicd ... -
第2章 选择器 =>伪类和伪元素 P57
2009-04-30 22:33 1466利用伪类选择器和伪元素选择器,可以为文档中不一定具体存在的结构 ... -
第2章 选择器 =>选择相邻兄弟元素P56
2009-04-30 22:28 1603假设你希望对一个标题 ... -
第2章 选择器 =>特定属性选择类型 P49
2009-04-27 00:19 995<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>属性值选择器 P46
2009-04-26 23:05 1001属性值 选择器 除了可以选择有某些属性的元素 ... -
第2章 选择器 =>简单的属性选择器 P44
2009-04-26 22:53 1269如果希望选择有某个属笥的元素,而不论该属性值是什么,可以使用一 ... -
第2章 选择器 =>多类选择器 P41
2009-04-26 22:45 1352现在假设希望class为warni ... -
第2章 选择器 =>类选择器 P39
2009-04-26 11:39 948<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择器分组 P34
2009-04-26 11:03 959<!DOCTYPE html PUBLIC " ... -
第2章 选择器 =>选择子元素 P54
2009-04-26 10:37 1306<!DOCTYPE html PUBLIC " ... -
第1章 CSS和文档局 => @import指令
2009-03-12 22:51 1124与link类似,.@import用于指示WEB浏览器加载一个外 ... -
第1章 CSS和文档局 => link标记 P19
2009-03-12 21:51 1149对于<link>标签的属性详解: ...
相关推荐
总的来说,CSS入门学习应从理解基本概念、熟悉选择器的使用开始,然后逐步掌握各种样式属性的设置,以及如何组织和引用CSS。随着经验的积累,可以深入学习CSS布局技术、动画、过渡和响应式设计等高级主题,提升网页...
- **选择符(Selector)**:选择符用于指定CSS规则应用到哪些HTML元素,如`div`、`p`、`#id`或`.class`等。 - **属性(Property)**:属性定义了元素的具体样式,如`width`、`color`、`font-size`等。 - **属性值...
教程中提到的一个关键概念是CSS的选择符。选择符是CSS用来定位和应用样式的HTML元素,如`div`、`p`、`img`等。例如,在给出的示例中,`div`被用作选择符,定义了其内部的样式。`div{width:200;filter:blur(add=true,...
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源,主要包括以下几个方面: 1. **CSS选择器**:CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器(如`<p>...
【CSS入门】 CSS,全称Cascading Style Sheets,是一种用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的样式表语言。CSS的主要作用是分离网页内容(HTML或XML)和表现形式,使得网页设计更加灵活,可...
【标题】:“第12章 CSS入门” 在学习网页设计和开发的过程中,CSS(层叠样式表)是不可或缺的一部分。CSS允许我们控制网页的布局、颜色、字体、大小和其他视觉元素,使网页呈现出美观且易读的效果。本章将带你入门...
CSS 样式表快速入门 CSS(Cascading Style Sheets)的简称,顾名思义,它是一种设计网页样式的工具。借助 CSS 强大的功能,网页将在您丰富的想象力下千变万化。下面我们来学习 CSS 的基础知识。 一、CSS 语句的...
1. **基本选择器**:包括类型选择器(如`p`)、类选择器(`.class`)、ID选择器(`#id`)和通配符选择器(`*`)。 2. **盒模型**:理解内容、内边距、边框和外边距的概念,以及如何通过`box-sizing`属性改变盒模型的...
在快速入门阶段,你需要了解CSS的基本语法结构:`选择符 { 属性:属性值 }`。例如: ```css div { width: 200px; filter: blur(add=true, direction=135, strength=20); } ``` 在这个例子中,`div`是选择符,`...
**CSS层叠样式表入门指南** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它为网页设计者提供了更多的控制力,使他们能够更精细地定义网页元素...
通过掌握以上核心知识点,初学者能够快速入门CSS,并逐步构建出具有专业外观的网页布局和样式。CSS的学习不仅是语法的熟悉,更在于实践中的不断探索与创新,希望这份笔记能成为你学习旅程中的良好开端。
CSS 的基本语句结构是 `选择符 { 属性: 属性值 }`,它由三个部分组成:选择符、属性和属性值。选择符可以是 HTML 中任何的标识符,如 `P`、`DIV`、`IMG`、`BODY` 等。 在 CSS 中,我们可以使用内嵌样式(Inline ...
### CSS入门教程知识点详解 #### 一、学习CSS前的基础知识 ##### 1. 网页与超文本语言(HTML) - **网页**: 是互联网上由URL(统一资源定位符)标识的信息资源,通常使用HTML(超文本标记语言)编写。 - **超文本...
- **基本语法**:选择符后面跟花括号,里面包含属性和对应的值,多个属性之间用分号隔开。例如:`H1{ font-size:x-large; color:red}`。 - **组合、继承和关联性**: - **组合**:多个选择符可以用逗号隔开,共享...
**CSS入门例子** 一个简单的CSS应用例子是在HTML文件中,通过`<style>`标签内联定义样式,如: ```html <!DOCTYPE html> body { background-color: lightblue; } h1 { color: white; text-align: center; } p...
4. **SMACSS(Scalable and Modular Architecture for CSS)**:这是一种CSS架构模式,提倡将CSS分为五类:Base(基础)、Layout(布局)、Module(模块)、State(状态)、Theme(主题)。这有助于创建清晰、可维护...
CSS入门** 初学者通常从简单的CSS实例开始,例如改变文本颜色、设置背景图像等。配合视频教程,可以直观理解CSS的基本用法。 **3. CSS语法** - **外部引用CSS**:通过`<link>`标签或`@import`规则将CSS文件引入...
CSS中的样式规则优先级是根据选择符的权重决定的。内联样式权重最高,接着是ID选择符,然后是类、属性和元素选择符。当多个规则冲突时,权重高的规则会覆盖权重低的规则。如果有相同权重,最新的样式会覆盖旧的样式...