学习要点：

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. Docker容器入门

    为什么要看docker 从去年起就或多或少的接受了docker的熏陶,主要还是Infoq在去年有很多关于docker的实践视频讲座,记得有一篇是<Docker在雪球的技术实践>,当时听的也 ...

  2. Android开发学习之路-Palette颜色提取工具类使用

    视频(要FQ):https://www.youtube.com/watch?v=5u0dtzXL3PQ Palette是一个在support-v7包中的一个颜色提取工具类,用法比较简单,而且是谷歌官方 ...

  3. redis常用操作总结

    在项目中时常会用到redis,redis看起来好像很难的样子,而且我也确认反复学习了很久,但是,总结下来,自己使用到的东西并不太多,如下作一些总结工作. 1.安装(单机) 1.1 windows, 直 ...

  4. Python - 动手写个ORM

    Python - 动手写个ORM 任务: 模拟简单的ORM - Object Relational Mapping 为model添加create方法 代码很简单,直接上 字段类型类 class Fie ...

  5. KnockoutJS 3.X API 第五章 高级应用(4) 自定义处理逻辑

    在典型的Knockout应用程序中,DOM元素是动态添加和删除的,例如使用模板绑定或通过控制流绑定(if,ifnot,with和foreach). 当创建自定义绑定时,通常需要添加清除逻辑,当Knoc ...

  6. ScheduleThreadPoolExecutor的工作原理与使用示例

    欢迎探讨,如有错误敬请指正 如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. ScheduleExecutorService接口.ScheduledFuture ...

  7. Reporting Service 配置SMTP和设置订阅出现的异常

    SSRS能够按照schedule,以mail的形式发送report,这是通过设置subscription report来实现的. 1,发送mail需要在SSRS中配置SMTP Server,如果没有R ...

  8. 大型 JavaScript 应用架构中的模式

    原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...

  9. windows phone Datepicker Timepicker

    选择程序包管理器控制台 在PM后输入Install-Package WPtoolkit可自动下载 PM> Install-Package WPtoolkit 在xaml中添加引用 xmlns:t ...

  10. Oracle如何实现从特定组合中随机读取值

    在这里,我们会用到DBMS_RANDOM包和CASE WHEN语句,思路如下: 一.利用DBMS_RANDOM.RANDOM函数随机生成数值,然后对数值进行取模,如果我们要在10个元素中随机读取的话, ...