选择器（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>

5. 通用选择器

　　通用选择器即为统配符，它匹配所有可用元素。通用选择器由一个*表示，用来对页面上的所有元素应用样式。

* {

    margin: 0px;

    padding: 0px;

}

6. HTML对象

　　HTML中的所有对象几乎都默认为两种类型：

　　block块状对象：当前对象显示为一个方块，在默认的显示状态下将占据整行，其他对象在下一行显示。

　　in-line行间对象：与block相反，允许下一个对象与其本身在同一行中显示。

CSS系列：CSS选择器的更多相关文章

  1. css系列教程--选择器

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

  2. css系列，选择器权重计算方式

    CSS选择器分基本选择器(元素选择器,类选择器,通配符选择器,ID选择器,关系选择器), 属性选择器,伪类选择器,伪元素选择器,以及一些特殊选择器,如has,not等. 在CSS中,权重决定了哪些CS ...

  3. HTML+CSS系列:CSS选择器(标签、ID、类、通配符、后代、子元素、并集、伪类）

    一.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  4. 【前端Talkking】CSS系列——CSS深入理解之line-height

    1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高line-height的理解,今天发布出来 ...

  5. 【CSS系列-选择器优先级总结】

    转:http://www.cnblogs.com/dolphinX/p/3511300.html 容易被忽略CSS特性   CSS初学感觉很简单,但随着学习的深入才感觉CSS的水由多深,平常总会遇到各 ...

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

    1.1.基本选择器 通配符选择器(*)      通配符选择器的使用方法如下 *{margin:0px; padding:0px;} //*代表所有的 ID选择器(#) ID选择器的使用方式如下: * ...

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

    后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器 子选择器:子选择器只是父选择器的一级子元素,使用"> ...

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

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  9. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

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

    目录 没人看系列----css 随笔 没人看系列----html随笔 前言 没什么要说的就是自己总结,学习用的如果想学点什么东西,请绕行. CSS (Cascading Style Sheets)层叠 ...

随机推荐

  1. LeetCode刷刷记录

    一遍考研,一遍还是要刷刷题.感觉自己的时间安排的不是很好,还是要抓紧自己的日常时间,当然,也要练练刷题的手感. 1.第一题就两重循环找到索引就OK,因为是无序的,所以就不能用二分来查找,题目中每个数的 ...

  2. PHP通过加锁实现并发情况下抢码实现

    需求:抢码功能 要求: 1.特定时间段才开放抢码: 2.每个时间段放开的码是有限的: 3.每个码不允许重复: 实现: 1.在不考虑并发的情况下实现: function get_code($len){ ...

  3. 【第三课】WEBIX 入门自学-Hello World

    在看官网教程时,入门的例子就是dataTable这个空间.So,遵循官网,一起来看一下入门的DataTable组件: WEB使用时固然是先引入相应的库文件: 代码如下 <html> < ...

  4. 【贪心】HDU 1257

    HDU 1257 最少拦截系统 题意:中文题不解释. 思路:网上有说贪心有说DP,想法就是开一个数组存每个拦截系统当前最高能拦截的导弹高度.输入每个导弹高度的时候就开始处理,遍历每一个拦截系统,一旦最 ...

  5. 用VB实现SmartQQ机器人

    这里为了便于介绍程序设计的流程,更多以代码形式给出,具体可用火狐浏览器的firebug插件来抓包分析,或者用谷歌浏览器的开发者工具进行抓包.抓包地址是:http://w.qq.com 第一步,是二维码 ...

  6. 6_PHP AJAX MYSQL

    XAMPP套装软件: 包含Apache.MySQL.PHP等多个开源软件的集合. https://www.apachefriends.org/zh_cn/index.html 监听完整相应消息: Wi ...

  7. 用Eclipse搭建ssh框架

    问:ssh是哪三大框架,以及他们的作用是什么? 答:分别是struts,spring,hibernate. struts的作用是:是web层,其核心是mvc模式,他可以自动获取参数,自动类型转换,自动 ...

  8. C#委托与事件初探

    最近刚刚接触C#,学到事件与委托部分无法理解,于是上网查阅了各种资料,终于明白了一些,在此进行总结. 一.C语言中的函数指针 想要理解什么是委托,就要先理解函数指针的概念.所谓函数指针,就是指向函数的 ...

  9. Ubuntu安装c++编译器

    打开终端输入sudo apt-get install build-essential 安装gcc和一些库函数.提供C/C++的编译环境 注意编译c++程序要用g++

  10. web Api 返回json 的两种方式

    web api写api接口时默认返回的是把你的对象序列化后以XML形式返回,那么怎样才能让其返回为json呢,下面就介绍两种方法: 方法一:(改配置法) 找到Global.asax文件,在Applic ...