学习要点：

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. [Java工具]Java常用在线工具集合.

    转载申明: 转载自http://www.hollischuang.com/Grepcode SearchCode ProcessOn json.cn diffchecker MaHua .马克飞象 . ...

  2. python 数据的拷贝

    # -*- config=utf-8 -*- #数据的拷贝 a=[1,2,3,4,5,6,"a","C"]; b=a;# a 与 b 的地址空间相同 a.app ...

  3. EasyUI分页索引不能输入非数字

    //分页索引不能输入非数字 function PagerCheck() { $(".pagination-num").keydown(function (event) { even ...

  4. ngOptions

    ngOptions select as select as label for value in array <select ng-model="myColor" ng-op ...

  5. Liferay7 BPM门户开发之46: 集成Activiti用户、用户组、成员关系同步

    在实际的BPM集成开发过程中,Liferay和Activiti这两个异构的系统之间,用户.组的同步需求非常重要,用来实现签收组的概念,比如指定签收组.会签.抢签都需要用到. Activiti可以通过自 ...

  6. java基础-复制

    package hanqi.test; import java.io.FileInputStream; import java.io.FileOutputStream; public class Te ...

  7. XML学习笔记5——XSD复杂数据类型

    和简单数据类型对应就是复杂数据类型了,XML元素的数据类型可以是简单数据类型,也可以是复杂数据类型,而XML属性的数据类型就只能是简单数据类型.这篇笔记,就来学习一下XSD中的复杂数据类型了. 1.定 ...

  8. CSS实现点击事件及实践

    实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...

  9. 因为相同类型的其他实体已具有相同的主键值。在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified" 。。。

    因为相同类型的其他实体已具有相同的主键值.在使用 "Attach" 方法或者将实体的状态设置为 "Unchanged" 或 "Modified&quo ...

  10. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...