学习要点：

1.选择器总汇

2.基本选择器

3.复合选择器

4.伪元素选择器

主讲教师：李炎恢

本章主要探讨 HTML5 中 CSS 选择器，通过选择器定位到想要设置样式的元素。目前 CSS 选择器的版本已经升级至第三代，即 CSS3 选择器。CSS3 选择器提供了更多、更丰富的选择器方式，主要分为三大类。

一．选择器总汇

本节课主要涉及到三种选择器：基本选择器、复合选择器和伪元素选择器，具体如下：

选择器

名称

说明

CSS 版本

*

通用选择器

选择所有元素

2

<type>

元素选择器

选择指定类型的元素

1

#<id>

id 选择器

选择指定 id 属性的元素

1

.<class>

class 选择器

选择指定 class 属性的元素

1

[attr]系列

属性选择器

选择指定 attr 属性的元素

2 ~ 3

s1,s2,s3...

分组选择器

选择多个选择器的元素

1

s1 s2

后代选择器

选择指定选择器的后代元素

1

s1 > s2

子选择器

选择指定选择器的子元素

2

s1 + s2

相邻兄弟选择器

选择指定选择器相邻的元素

2

s1 ~ s2

普通兄弟选择器

选择指定选择器后面的元素

3

::first-line

伪元素选择器

选择块级元素文本的首行

1

::first-letter

伪元素选择器

选择块级元素文本的首字母

1

::before

伪元素选择器

选择元素之前插入内容

2

::after

伪元素选择器

选择元素之后插入内容

2

二．基本选择器

使用简单且频率高的一些选择器归类为基本选择器。

1.通用选择器

* {

    border: 1px solid red;

}

解释：“*”号选择器是通用选择器，功能是匹配所有 html 元素的选择器包括<html>和<body>标签。可以使用如下元素标记测试效果：

<p>段落</p>
<b>加粗</b> 
<span>无</span>

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用。

2.元素选择器

p {

    color: red;

}
<p>段落</p>

解释：直接使用元素名称作为选择器名即可。

3.ID 选择器

#abc {

    font-size: 20px;

}
<p id="abc">段落</p>

解释：通过对元素设置全局属性 id，然后使用#id 值来选择页面唯一元素。

4.类选择器

.abc {

    border: 1px solid red;

}
<b class="abc">加粗</b>
<span class="abc">无</span>

解释：通过对元素设置全局属性 class，然后使用.class 值选择页面一个或多个元素。

b.abc {

    border: 1px solid red;

}

解释：也可以使用“元素.class 值”的形式，限定某种类型的元素。

<span class="abc edf">无</span>

解释：类选择器还可以调用多个样式，中间用空格隔开进行层叠。

5.属性选择器

//所需 CSS2 版本

[href] {

    color: orange;

}

解释：属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

//所需 CSS2 版本

[type="password"] {

    border: 1px solid red;

}

解释：匹配属性值的属性选择器。

//所需版本 CSS3

[href^="http"] {

    color: orange;

}

解释：属性值开头匹配的属性选择器。

//所需版本 CSS3

[href$=".com"] {

    color: orange;

}

解释：属性值结尾匹配的属性选择器。

//所需版本 CSS3

[href*="baidu"] {

    color: orange;

}

解释：属性值包含指定字符的属性选择器。

//所需版本 CSS2

[class~="edf"] {

    font-size: 50px;

}

解释：属性值具有多个值时，匹配其中一个值的属性选择器。

//所需版本 CSS2

[lang|="en"] {

    color: red;

}

解释：属性值具有多个值且使用“-”号连接符分割的其中一个值的属性选择器。比如

<i lang="en-us">HTML5</i>

二．复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

1.分组选择器

p,b,i,span {

    color: red;

}

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用 ID 选择器、类选择器、属性选择器混合使用。

2.后代选择器

p b {

    color: red;

}

解释：选择<p>元素内部所有<b>元素。不在乎<b>的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器。

3.子选择器 

ul > li {

    border: 1px solid red;

}
<ul>

    <li>

        我是儿子

        <ol>

            <li>

                我是孙子

            </li>

            <li>

                我是孙子

            </li>

        </ol>

    </li>

    <li>

        我是儿子

    </li>

    <li>

        我是儿子

    </li>

</ul>

解释：子选择器类似与后代选择器，而最大的区别就是子选择器只能选择父元素向下一级的元素，不可以再往下选择。

4.相邻兄弟选择器

p + b {

    color: red;

}

解释：相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

5.普通兄弟选择器

p ~ b {

    color: red;

}

解释：普通兄弟选择器匹配和第一个元素后面的所有元素。

三．伪元素选择器

伪选择器分为两种第一种是下节伪类选择器，还有一种就是伪元素选择器。这两种选择器特性上比较容易混淆，在 CSS3 中为了区分，伪元素前置两个冒号（::），伪类前置一个冒号（:）。

1.::first-line 块级首行

::first-line {

    color: red;

}

解释：块级元素比如<p>、<div>等的首行文本被选定。如果想限定某种元素，可以加上前置 p::first-line。

2.::first-letter 块级首字母

::first-letter {

    color: red;

}

解释：块级元素的首行字母。

3.::before 文本前插入

a::before {

    content: '点击-';

}

解释：在文本前插入内容。

4.::after 文本后插入

a::before {

    content: '-请进';

}

解释：在文本后插入内容。

第 13 章 CSS 选择器[上]的更多相关文章

  1. Css选择器(上) 让样式无孔不入

    css选择器    一个可以选择样式的工具, 这里适用于无论是内部代码还是外部引用 abc.css 这类型的文件. 基本选择器*{ }        就是一个简单的*, 代表应用于全部. 不适合于个性 ...

  2. 从零开始学习html（八）CSS选择器——上

    一.什么是选择器? <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  3. 《深入理解bootstrap》读书笔记：第三章 CSS布局

    一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...

  4. css选择器

    常用css选择器,希望对大家有所帮助,不喜勿喷. 1.*:通用选择器 * { margin: 0; padding: 0; } 选择页面上的全部元素,通常用于清除浏览器默认样式,不推荐使用. 2.#i ...

  5. 总结30个CSS选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  6. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  7. 《CSS3实战》读书笔记 第三章：选择器：样式实现的标记

    第三章:选择器:样式实现的标记 选择器的魔力在于,让你完全实现对网页样式的掌控.不同的选择器可以用在不同的情况下使用.总之把握的原则是:规范的编码,根据合理地使用选择器,比去背选择器的定义有价值的多. ...

  8. CSS选择器、优先级与匹配原理

    为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 ...

  9. CSS选择器特殊性与重要性

    特殊性 在编写CSS代码的时候,我们会出现多个样式规则作用于同一个元素的情况,例如 <!-- HTML --> <header> <nav class="nav ...

随机推荐

  1. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例二.

    为了更好的排版, 所以将IK分词器的安装重启了一篇博文,  大家可以接上solr的安装一同查看.[Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一: http://ww ...

  2. Thinking in java中关于Exception的一道面试题.

    今天看到Thinking in Java中一个关于Exception的例子:最后看到有一篇总结的比较好的文章, 这里拿来记录下, 文章地址是:http://blog.csdn.net/salerzha ...

  3. [Java类加载器]Java中classLoader浅析.

    本文为在公司内部TD上写的一篇小文, 主要讲解java中classLoader基础知识, 现在拿来这里分享一下. 一.问题 请在Eclipse中新建如下类,并运行它: 1 package java.l ...

  4. Atitit. 类与对象的存储实现

    Atitit. 类与对象的存储实现 1. 类的结构和实现1 2. 类的方法属性都是hashtable存储的.2 3. Class的分类 常规类(T_CLASS), 抽象类(T_ABSTRACT T_C ...

  5. Atititcmd cli环境变量的调用设置与使用

    Atititcmd cli环境变量的调用设置与使用 1.1. Cgi 环境变量的调用设置与使用1 1.2. 环境变量vs  系统变量1 1.3. 环境变量的分类 A.与服务器相关的环境变量B ,与客户 ...

  6. 百度面试题 字符串相似度 算法 similar_text 和页面相似度算法

    在百度的面试,简直就是花样求虐. 首先在面试官看简历的期间,除了一个自己定义字符串相似度,并且写出求相似度的算法. ...这个确实没听说过,php的similar_text函数也是闻所未闻的.之前看s ...

  7. fir.im Weekly - 如何打造 Github 「爆款」开源项目

    最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...

  8. 学习bootstrap遇到的问题--001 关于bootstrap中类.disabled不禁用默认行为

    自学bootstrap遇到的疑惑篇: 按钮状态--禁用 在Bootstrap框架中,要禁用按钮有两种实现方式: 方法1:在标签中添加disabled属性 方法2:在元素标签中添加类名"dis ...

  9. 深入理解CSS背景

    前面的话 背景和字体一样,是一个复合属性,而且它是一个使用频率很高的属性.在CSS3中,背景属性在保持以前用法的同时,增加了新的相关属性.本文将详细介绍关于背景的知识 背景颜色 背景色backgrou ...

  10. 编译原理（简单自动词法分析器LEX）

    编译原理(简单自动词法分析器LEX)源程序下载地址:  http://files.cnblogs.com/files/hujunzheng/%E6%B1%87%E7%BC%96%E5%8E%9F%E7 ...