第四章 CSS选择器

所有HTML语言中的标记都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果。

1、标记选择器

一个HTML页面有很多不同的标记组成,而CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如P选择器,就是用于声明页面中所有<p>标记的样式风格。

CSS代码声明了HTML页面中所有的<h1>标记,文字的颜色都采用红色,大小都为25px。

<style>
h1{
    color:red;
    font-size:25px;
}
</style>

每一个CSS选择器都包含了选择器本身、属性和值,其中属性和值可以设置多个,从而实现对同一个标记,声明多种样式风格。

CSS语言对于所有属性和值都有相对严格的要求,如果声明的属性在CSS规范中没有,或者某个属性的值不符合该属性的要求,都不能使该CSS语句生效。通常情况下可以直接利用CSS编辑器的语法提示功能避免,但某些时候还需要查阅CSS手册或者直接登录W3C的官方网站(http://www.w3.org/)来查阅CSS的详细规格说明。

2、类别选择器

类别选择器的名称可以由用户自定义,属性和值跟标记选择器一样,也必须符合CSS规范。

当页面中同时出现3个<p>标记,并且希望它们的颜色各不相同,就可以通过设置不同的class选择器来实现。

<html>
<head>
<title>class选择器</title>
<style type="text/css">
<!--
.one{
    color:red;      /*红色*/
    font-size:18px;     /* 文字大小*/
}
.two{
    color:green;
    font-size:20px;
}
.three{
    color:cyan;
    font-size:22px;
}
-->
</style>
</head>
<body>
    <p class="one">class选择器1</p>
    <p class="two">class选择器2</p>
    <p class="three">class选择器3</p>
    <h3 class="two">h3同样适用</h3>
</body>
</html>           
时间: 2024-11-10 13:01:29

第四章 CSS选择器的相关文章

第十三章 CSS选择器(下)

第 13章  CSS选择器[下] 学习要点: 1.伪类选择器总汇 2.结构性伪类选择器 3.UI伪类选择器 4.动态伪类选择器 5.其他伪类选择器 本章主要探讨 HTML5中  CSS选择器中的伪类选择器,和伪元素选择器一样,面向某种共同特征来选择元素. 一.伪类选择器总汇 伪类选择器分为四种类型:结构性伪类.UI伪类.动态伪类和其他伪类选择器 二.结构性伪类选择器 结构性伪类选择器能够根据元素在文档中的位置选择元素.这类元素都有一个前缀(:). 1.根元素选择器 :root  { border

web—第四章css&amp;第五章

web—第四章css&第五章 终于迎接等待已久的CSS,在没学这个之前,我们只会用一点img,查一点小图片,或者是用style改一下颜色,而且比较麻烦.现在多了个css在文件夹在创建一个css文件很多东西都可以在css里面而且修改的话非常方便,但是我还是有一些问题,就是老师叫我们做注册表的时候:年月日我真不相信是用下拉列表一个一个打上去的,我一开始想用时间轴但是太难啦,老师也没说. 随着时间过得很快国庆节也要来临了,这几天老师似乎有点急但是又怕教不好我们所以课程会有点紧张,但是我觉得还是很好跟上

第 13 章 CSS 选择器[上]

学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 选择器,通过选择器定位到想要设置样式的元素.目前 CSS 选择器的版本已经升级至第三代,即 CSS3 选择器.CSS3 选择器提供了更多.更丰富的选择器方式,主要分为三大类. 一.选择器总汇 本节课主要涉及到三种选择器:基本选择器.复合选择器和伪元素选择器,具体如下: 选择器 名称 说明 CSS 版本 * 通用选择器 选择所有元素 2 <type> 元素选择器

css权威指南阅读笔记-第二章css选择器

css选择器有10+种.这里介绍几种常用的和他们的特点 1.元素选择器 如h1 h2 h3 a p 等一系列标签名 2 通配选择器 *,匹配所有html的元素 3 类选择器 class=‘a b'这种选择器在.a.b和.b.a是一样的,不区别先后顺序,另外类选择器区分大小写,class='A'在css中不能用.a匹配到,只能用.A匹配到 类选择器在页面中一般用于样式的复用 4 ID选择器 id选择器在页面中具有唯一性,并区分大小写,就是说box和BOX不是同一个ID 5 属性选择器 有4种模式

CSS总结(四)—— CSS选择器优先级

css选择器优先级 优先顺序: 1.!important (IE6不支持此属性) 2.html中元素标签添加的style=“”(css难以管理,不推荐) 3.一个或多个id选择器 例:#top{margin:0;} 4.一个或多个类选择器(包括属性.伪类选择器) 例:.outer{}   [data-job="frontend"]{}    a:active{} 5.标签选择器 例:div{margin:3px;} 6.通配选择器 例:*{margin:10px;} ★ 选择器规则:

第四章 CSS基础

1.CSS是cascading style sheets 层叠样式表.样式定义如何显示html元素,通常存储在样式表中,将样式添加到html中,是为了解决内容与表现分离的问题. 2.外部样式表可以极大提高工作效率,通常存储在CSS文件中,多个样式定义可以层叠为一. 3.程序里有三种方式添加样式:直接添加到标记里 <p style=””>(内联样式表):<style> 内部样式表:<link rel=”stylesheet” href=”css文件目录” type=”text/

jQuery_第四章_选择器

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行

最常用的五类CSS选择器

一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com的其他文章. 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为选择器,可以是p.

详解CSS选择器、优先级与匹配原理

最常用的五类CSS选择器 准确而简洁的运用CSS选择器会达到非常好的效果.我们不必通篇给每一个元素定义类(class)或ID,通过合适的组织,可以用最简单的方法实现同样的效果.在实际工作中,最常用的选择器有以下五类: 一.标签选择器: 顾名思议,标签选择器是直接将HTML标签作为CSS选择器,可以是p.h1.dl.strong等HTML标签.如: p{font:12px;} em{color:blue;} dl{float:left;margin-top:10px;} 二.id选择器: 我们通常