`
conkeyn
  • 浏览: 1522839 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

CSS入门4:css选择符

    博客分类:
  • CSS
阅读更多

一.选择符模式

模式/含义/内容描述

*
匹配任意元素。(通用选择器)
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; }

分享到:
评论

相关推荐

    CSS入门基础经典教程

    总的来说,CSS入门学习应从理解基本概念、熟悉选择器的使用开始,然后逐步掌握各种样式属性的设置,以及如何组织和引用CSS。随着经验的积累,可以深入学习CSS布局技术、动画、过渡和响应式设计等高级主题,提升网页...

    CSS快速入门 中文 手册

    - **选择符(Selector)**:选择符用于指定CSS规则应用到哪些HTML元素,如`div`、`p`、`#id`或`.class`等。 - **属性(Property)**:属性定义了元素的具体样式,如`width`、`color`、`font-size`等。 - **属性值...

    CSS快速入门(PDF)

    教程中提到的一个关键概念是CSS的选择符。选择符是CSS用来定位和应用样式的HTML元素,如`div`、`p`、`img`等。例如,在给出的示例中,`div`被用作选择符,定义了其内部的样式。`div{width:200;filter:blur(add=true,...

    CSS入门源代码 CSS入门源代码

    这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源,主要包括以下几个方面: 1. **CSS选择器**:CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器(如`&lt;p&gt;...

    css入门-绝对经典

    【CSS入门】 CSS,全称Cascading Style Sheets,是一种用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现的样式表语言。CSS的主要作用是分离网页内容(HTML或XML)和表现形式,使得网页设计更加灵活,可...

    第12章 CSS入门

    【标题】:“第12章 CSS入门” 在学习网页设计和开发的过程中,CSS(层叠样式表)是不可或缺的一部分。CSS允许我们控制网页的布局、颜色、字体、大小和其他视觉元素,使网页呈现出美观且易读的效果。本章将带你入门...

    CSS样式表.docx

    CSS 样式表快速入门 CSS(Cascading Style Sheets)的简称,顾名思义,它是一种设计网页样式的工具。借助 CSS 强大的功能,网页将在您丰富的想象力下千变万化。下面我们来学习 CSS 的基础知识。 一、CSS 语句的...

    CSS快速入门.rar

    1. **基本选择器**:包括类型选择器(如`p`)、类选择器(`.class`)、ID选择器(`#id`)和通配符选择器(`*`)。 2. **盒模型**:理解内容、内边距、边框和外边距的概念,以及如何通过`box-sizing`属性改变盒模型的...

    CSS教程之CSS快速入门

    在快速入门阶段,你需要了解CSS的基本语法结构:`选择符 { 属性:属性值 }`。例如: ```css div { width: 200px; filter: blur(add=true, direction=135, strength=20); } ``` 在这个例子中,`div`是选择符,`...

    CSS层叠样式表入门指南ppt

    **CSS层叠样式表入门指南** CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它为网页设计者提供了更多的控制力,使他们能够更精细地定义网页元素...

    css自学入门笔记

    通过掌握以上核心知识点,初学者能够快速入门CSS,并逐步构建出具有专业外观的网页布局和样式。CSS的学习不仅是语法的熟悉,更在于实践中的不断探索与创新,希望这份笔记能成为你学习旅程中的良好开端。

    CSS样式表学习从门到精通

    CSS 的基本语句结构是 `选择符 { 属性: 属性值 }`,它由三个部分组成:选择符、属性和属性值。选择符可以是 HTML 中任何的标识符,如 `P`、`DIV`、`IMG`、`BODY` 等。 在 CSS 中,我们可以使用内嵌样式(Inline ...

    CSS入门教程

    ### CSS入门教程知识点详解 #### 一、学习CSS前的基础知识 ##### 1. 网页与超文本语言(HTML) - **网页**: 是互联网上由URL(统一资源定位符)标识的信息资源,通常使用HTML(超文本标记语言)编写。 - **超文本...

    CSS+DIV入门教程PPT_2010.ppt

    - **基本语法**:选择符后面跟花括号,里面包含属性和对应的值,多个属性之间用分号隔开。例如:`H1{ font-size:x-large; color:red}`。 - **组合、继承和关联性**: - **组合**:多个选择符可以用逗号隔开,共享...

    css css css

    **CSS入门例子** 一个简单的CSS应用例子是在HTML文件中,通过`&lt;style&gt;`标签内联定义样式,如: ```html &lt;!DOCTYPE html&gt; body { background-color: lightblue; } h1 { color: white; text-align: center; } p...

    Web-前端html+css从入门到精通 231. CSS架构与文件组织.zip

    4. **SMACSS(Scalable and Modular Architecture for CSS)**:这是一种CSS架构模式,提倡将CSS分为五类:Base(基础)、Layout(布局)、Module(模块)、State(状态)、Theme(主题)。这有助于创建清晰、可维护...

    css基础知识word版

    CSS入门** 初学者通常从简单的CSS实例开始,例如改变文本颜色、设置背景图像等。配合视频教程,可以直观理解CSS的基本用法。 **3. CSS语法** - **外部引用CSS**:通过`&lt;link&gt;`标签或`@import`规则将CSS文件引入...

    div+css页面布局,新手入门教材,2天学会div+css

    CSS中的样式规则优先级是根据选择符的权重决定的。内联样式权重最高,接着是ID选择符,然后是类、属性和元素选择符。当多个规则冲突时,权重高的规则会覆盖权重低的规则。如果有相同权重,最新的样式会覆盖旧的样式...

Global site tag (gtag.js) - Google Analytics