学习要点：

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. Nodejs·内存控制

    之前有考虑过Node中的内存管理,但是没想到Node的内存机制与JVM如此相像. 看完这部分的内容,基本可以了解Node中的内存使用技巧: 1 尽量不要做过多的缓存 2 使用队列应该有限制 3 注意全 ...

  2. Java程序员的日常—— POI与JDBC、Mockmvc与单元测试

    周日没怎么休息好,周一一天都迷迷糊糊的,不过还算是干了不少的活. 总结一下,大致有以下几点内容: 1 使用poi以及mysql jdbc实现了一个复杂excel的导入 2 基于工程原有的代码,书写sp ...

  3. iOS开发中数组常用的五种遍历方式

    随着iOS的不断发展,apple也不断推出性能更高的数组遍历方式,下面将对熟悉的五种遍历方式进行列举. 首先定义一个数组,并获取数组长度 NSArray *array=@[",]; NSIn ...

  4. Java六大问题你都懂了吗？

    这些问题对于认真学习java的人都要必知的,当然如果你只是初学者就没必要那么严格了,那如果你认为自己已经超越初学者了,却不很懂这些问题,请将你自己重归初学者行列. 一.到底要怎么样初始化! 本问题讨论 ...

  5. C#并行编程-Task

    菜鸟学习并行编程,参考<C#并行编程高级教程.PDF>,如有错误,欢迎指正. 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 ...

  6. 在同一台电脑上同时安装Python2和Python3

    目前Python的两个版本Python2和Python3同时存在,且这两个版本同时在更新与维护. 到底是选择Python2还是选择Python3,取决于当前要使用的库.框架支持哪个版本. 例如:HTM ...

  7. Android SDK 百度云盘分享链接

    SDK百度云盘地址: 链接: http://pan.baidu.com/s/1skSCplF 密码: drq4 使用说明: 这是Android开发所需的sdk,下载并解压后,将解压出的整个文件夹复制或 ...

  8. 让 “微软雅黑” 在IE6下完美显示

    微软雅黑可以说是网页中最常见的字体了,但是往往在IE8+的浏览器上调试得很好,到了IE6则会变成默认的"宋体". 因为宋体字体宽度通常比雅黑的要宽,有时候会把页面都布局挤乱. 为了 ...

  9. Liferay7 BPM门户开发之45: 集成Activiti文件上传部署流程BPMN模型

    开发文件上传,部署流程模板. 首先,开发jsp页面,deploy.jsp <%@ include file="/init.jsp" %> <h3>${RET ...

  10. 读《编写可维护的javascript》笔记

    第一章 基本的格式化 缩进层级:推荐 tab:4; 换行:在运算符后面换行,第二行追加两个缩进: // Good: Break after operator, following line inden ...