CSS系列:CSS选择器

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

  CSS选择器包括:标记选择器、类别选择器、ID选择器及复合选择器。

1. 标记选择器

  一个HTML页面由很多不同的标记组成,CSS标记选择器用来声明哪些标记采用哪种CSS样式。因此,每一种HTML标记的名称都可以作为相应的标记选择器的名称。

  示例:

<style type="text/css">
    h1 {
        color: red;
        font-size: 25px;
    }
</style>

2. 类别选择器

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

  示例:

<style type="text/css">
    .green {
        color: green;
        font-size: 20px;
    }
</style>

  在HTML标记中,还可以同时给一个标记运用多个class类别选择器,从而将多个类别的样式风格同时运用到一个标记中。在实际制作网站时往往会很有用,可以适当减少代码的长度。

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        .color {
            color: red;
        }

        .size {
            font-size: 25px;
        }
    </style>
</head>
<body>
    <div class="color size">HTML中标记运用多个类别样式</div>
</body>
</html>

3. ID选择器

  ID选择器的使用方法与class选择器基本相同,不同之处在于ID选择器只能在HTML页面中使用一次。在HTML标记中只需要利用id属性,即可直接调用CSS中的ID选择器。

  现在在很多浏览器中,ID选择器可以用于多个标记,即每个标记定义的id不只是CSS可以调用,JavaScript等其他脚本语言同样可以调用。因为这个特性,所以不要讲ID选择器用于多个标记,否则会出现一些错误。在编写CSS代码时,培养编码习惯一个id最多只能赋予一个HTML标记。

4. 复合选择器

  复合选择器是指两个或多个基本选择器(标记选择器、类别选择器及ID选择器),通过不同方式连接而成的选择器。

4.1 交集选择器

  交集复合选择器由两个选择器直接连接构成,其结果是其中二者各自元素范围的交集。其中第一个必须是标记选择器,第二个必须是类别选择器或ID选择器。两个选择器直接不能有空格,必须连续书写。

  这种方式构成的选择器,将选中同时满足二者定义的元素。

  示例:

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        p {
            color: blue;
        }

        .special {
            color: green;
        }

        p.special {
            color: red;
        }
    </style>
</head>
<body>
    <p>普通段落文本</p>
    <h3>普通标题文本</h3>
    <p class="special">指定了.special类别的段落文本</p>
    <h3 class="special">指定了.special类别的标题文本</h3>
    <div class="special">指定.special类别的div</div>
</body>
</html>

4.2 并集选择器

  并集选择器的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器(包括标记选择器、类别选择器、ID选择器)都可以作为并集选择器的一部分。

  并集选择器是多个选择器通过逗号连接而成的,在声明各种CSS选择器时,如果某些选择器的风格是完全相同的,或者部分相同,这时便可以利用并集选择器同时声明风格相同的CSS选择器。

<style type="text/css">
    h1, h2, h3, h4, h5 {
        font-size: 12px;
    }
</style>

4.3 后代选择器

  在CSS选择器中,可以通过嵌套的方式,对特殊位置的HTML标记进行声明,可以使用后代选择器进行控制。后代选择器的写法是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记发生嵌套时,内层的标记成为外层标记的后代。

  不仅标记选择器可以嵌套组合成后代选择器,类别选择器和ID选择器都可以进行嵌套组合。

  示例:

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <style type="text/css">
        p span {
            font-size: 12px;
            color: green;
        }
    </style>
</head>
<body>
    <p><span>文本</span></p>
</body>
</html>

  后代选择器产生的影响不仅限于元素的直接后代,而且会影响到它的各级后代。

  CSS中还规定了一种子选择器的复合选择器,它是只对直接后代有影响的选择器,对“孙子”以及多个层的后代不产生作用。

  子选择器和后代选择器的语法区别是使用“>”连接。

<style type="text/css">
    p>span {
        font-size: 12px;
        color: green;
    }
</style>
时间: 2024-10-11 11:06:22

CSS系列:CSS选择器的相关文章

css系列教程--选择器

css派生选择器:是指在某个样式表或者dom元素的行内定义行内元素的属性,而其他同名样式在其他dom节点无效的样式表定义方式.例如:div ul li{border:1px solid red;}<div><ul><li>我是有边框的</li></ul></div><span><ul><li>我是无边框的</li></ul></span>定义了派生选择器的样式以后

直击css系列----Css、less和Sass(SCSS)

可能大家对于css还是比较了解了,但说到SASS和LESS还是很陌生,那么今天就跟我来一起了解一下CSS.LESS和SASS.   背景 CSS(层叠样式表)是一门非程序式语言,入门学习使用非常直观方便,但是对于一些比较复杂或者重用性比较强的项目来说,因为CSS没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码.为了方便前端开发的工作量,出现

我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级

首先看一下使用Css设置h1标签字体颜色和大小的例子,效果图如下: 新建一个网页test.html,然后复制粘贴下面的内容: <html> <head> <style type="text/css"> h1 {color:red; font-size:14px;} </style> </head> <body > <h1>使用Css让h1标签字体变红</h1> </body> &

CSS系列:CSS3新增选择器

CSS系列:CSS3新增选择器 1. CSS1定义的选择器 选择器 类型 说明 E 类型选择器 选择指定类型的元素 E#id ID选择器 选择匹配E的元素,且匹配元素的id为“id”,E选择符可以省略. E.class 类选择器 选择匹配E的元素,且匹配元素的class属性值为“class”,E选择符可以省略. E F 包含选择器 选择匹配F的元素,且该元素被包含在匹配E的元素内. E:link 链接伪类选择器 选择匹配E的元素,且匹配元素被定义了超链接并未被访问.例:a:link E:visi

CSS系列------选择器和选择器的优先级

1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: *#intro {font-weight:bold;}//也可以省略通配符 #intro{font-weight:bold;} //两种方式是一样的. 不同于其他选择器,id选择器有以下特点 规范: 同一个id,在一个网页中只能标注一个元素. 如果有同名id ,则在CSS中用ID选择器时,依旧会匹配所

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器 相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器 比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

CSS系列(4)-如何使用Firebug查看网页的html和css

Firebug是火狐浏览器Firefox的一个插件,专门为开发人员开发的.使用Firebug需要先在Firefox中安装这个插件,网上有很多教程,可以对照着安装一下. 不同的火狐浏览器版本中的Firebug可能有些差别,不过大致相同.我使用的是火狐31.0版本. 使用Firebug查看百度的菜单. 1,百度首页改版了,变得更简洁了,通过百度首页,打开左上角[更多产品]中的[全部产品] 2,打开之后,可以看到百度的菜单如下图, 网址为:http://www.baidu.com/more/ 3,按一

深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息,但是却无法使用javascript来直接操作伪元素,本文以一个需求解决为例,详细介绍脚本化伪元素的6种方法 需求说明 [1]为id=box的div元素添加content="前缀"的:before伪元素 [2]为已经添加:before伪元素的div元素删除伪元素  [注意]由于IE7-浏览

没人看系列----css 随笔

目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠样式表 引入方式 1.行内式 行内式是在标签的style属性中设定CSS样式. <div style="width:200px;height:100px;border:1px solid black;"></div> 2.嵌入式 嵌入式是将CSS样式集中写在网页的&

(2)css的复合选择器与特性

css的复合选择器与特性 在本篇学习资料中,将深入了解css的相关概念,上一篇介绍的3种基本选择器的基础上,学习3种由基本选择器复合构成的选择器,然后再介绍css的两个重要的特性. 1.复合选择器 复合选择器就是两个或多个基本选择器,通过不同的方式连接成的选择器. 复合选择器的三种类型:交集选择器.并集选择器.后代选择器. (1)交集选择器 “交集”复合选择器由两个选择器直接连接构成:其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器:这两个选择器之间不能有空格. 例如:下图声明了