CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介绍CSS1~CSS3的选择器,而本章针对css1-css2的一个整理。希望对大家有帮助!谢谢!

1.基础的选择器

选择器

含义

示例

*

通用元素选择器,匹配任何元素

* { margin:0; padding:0; }

E

标签选择器,匹配所有使用E标签的元素

p { font-size:2em; }

.info和E.info

class选择器,匹配所有class属性中包含info的元素

.info { background:#ff0; }p.info { background:#ff0; }

#info和E#info

id选择器,匹配所有id属性等于footer的元素

#info { background:#ff0; }p#info { background:#ff0; }

2.组合选择器

选择器

含义

示例

E,F

多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔

Div,p { color:#f00; }

E F

后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔

p { font-size:2em; }

E > F

子元素选择器,匹配所有E元素的子元素F

div > strong { color:#f00; }

E + F

毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

p + p { color:#f00; }

3.CSS 2.1 属性选择器

选择器

含义

示例

E[att]

匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略,比如“[cheacked]”。以下同。)

p[title] { color:#f00; }

E F

后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔

p { font-size:2em; }

E > F

子元素选择器,匹配所有E元素的子元素F

div > strong { color:#f00; }

E + F

毗邻元素选择器,匹配所有紧随E元素之后的同级元素F

p + p { color:#f00; }

注:CSS 2.1 属性选择器还有一个特点就是使用多个选择器,同时满足这多个选择器:blockquote[class=quote][cite] { color:#f00; }!

4.CSS 2.1 中的伪类

选择器

含义

示例

E:first-child

匹配父元素的第一个子元素

p:first-child { font-style:italic; }input[type=text]:focus { color:#000; background:#ffe; }input[type=text]:focus:hover { background:#fff; }q:lang(sv) { quotes: “\201D” “\201D” “\2019″ “\2019″; }

E:link

匹配所有未被点击的链接

E:visited

匹配所有已被点击的链接

E:active

匹配鼠标已经其上按下、还没有释放的E元素

E:hover

匹配鼠标悬停其上的E元素

E:focus

匹配获得当前焦点的E元素

E:lang(c)

匹配lang属性等于c的E元素

5.CSS 2.1中的伪元素

选择器

含义

示例

E:first-line

匹配E元素的第一行

p:first-line { font-weight:bold; color;#600; }.preamble:first-letter { font-size:1.5em; font-weight:bold; }.cbb:before { content:”"; display:block; height:17px; width:18px; background:url(top.png) no-repeat 0 0; margin:0 0 0 -18px; }a:link:after { content: ” (” attr(href) “) “; }

E:first-letter

匹配E元素的第一个字母

E:before

在E元素之前插入生成的内容

E:after

在E元素之后插入生成的内容

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏听雨堂

用多个类别来进行微调

          有时css的类基本设计好了,对于大多数的标签都能够实用,但却又个别的不行。如,菜单项,绝大多数都是2个字的,总体上按照这个宽度来设计,但还有...

1878
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(二)过滤器,按键修饰符,自定义指令

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

472
来自专栏积累沉淀

JavaScript DOM操作表格及样式

一.操作表格 <table>标签是HTML中结构最为复杂的一个,可以通过DOM来创建生成它(比较麻烦),或者HTML DOM来操作它。 //需要操作的table...

17710
来自专栏IT可乐

XML介绍

1、什么是 XML文件?   XML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计...

16410
来自专栏Nian糕的私人厨房

jQuery 常用方法

jQuery 是一个快速、简洁的 JavaScript 框架,封装 JavaScript 常用的功能代码,提供一种简便的 JavaScript 设计模式,优化 ...

845
来自专栏GreenLeaves

JavaScript之JS实现动画效果

    在前面的随笔中介绍了如何用DOM技术修改文档的央样式信息,用JavaScript添加样式信息可以节约我们的时间和精力,但总的来说,CSS仍是完成这类任务...

3456
来自专栏前端说吧

JS-DOM2级封装练习题--点击登录弹出登录对话框

3047
来自专栏天天

$.ajax()

815
来自专栏Google Dart

AngularDart Material Design 是/否 按钮 顶

可以使用MaterialSaveCancelButtonsDirective等指令来提供基本文本自定义,该指令用保存/取消替换是/否。

925
来自专栏专注 Java 基础分享

struts2标签库----数据标签详解

     上篇文章我们介绍struts2标签库中的控制标签的基本使用和部分原理,本篇文章接着了解下标签库中有关数据标签的使用和原理。主要涉及以下数据标签: ac...

22710

扫码关注云+社区