css选择器规则

1. 选择器分类

简单选择器(Simple selectors):通过元素类型、class 或 id 匹配一个或多个元素。
属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素。
伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,或元素是DOM树中一父节点的第一个子节点。
伪元素(Pseudo-elements):匹配处于相关的确定位置的一个或多个元素,例如每个段落的第一个字,或者某个元素之前生成的内容。
组合器(Combinators):这里不仅仅是选择器本身,还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如,你可以只选择divs的直系子节点的段落,或者直接跟在headings后面的段落。
多用选择器(Multiple selectors):这些也不是单独的选择器;这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面, 以将一组声明应用于由这些选择器选择的所有元素。

2. 简单选择器

类型选择器(又名元素选择器): 选择器名和指定的HTML元素名的不区分大小写的匹配。

元素名 {属性名:属性值;}

类选择器: 由一个点“.”以及类后面的类名组成。

.类名 {属性名:属性值;}

ID 选择器: 由哈希/磅符号 (#)组成,后面是给定元素的ID名称( ID 名称具有唯一性)。

#ID名 {属性名:属性值;}

通用选择器: (*)星号,表示选择页面所有元素。

* {属性名:属性值;}

3. 属性选择器

属性选择器是一种特殊类型的选择器,它根据元素的 属性和属性值来匹配元素。

通用语法: [属性名:属性值]

分类: 存在和值属性选择器 和 子串值属性选择器。

3.1 存在和值(Presence and value)属性选择器

这些属性选择器尝试匹配精确的属性值:

[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何。
[attr=val]:该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]:该选择器仅选择 attr 属性的值(以空格间隔出多个值)中有包含 val 值的所有元素,比如位于被空格分隔的多个类(class)中的一个类。

3.2 子串值(Substring value)属性选择器

这种情况的属性选择器也被称为“伪正则选择器”,因为它们提供类似 regular expression 的灵活匹配方式(但请注意,这些选择器并不是真正的正则表达式):

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(-用来处理语言编码)。
[attr^=val] : 选择attr属性的值以val开头(包括 val)的元素。
[attr$=val] : 选择attr属性的值以val结尾(包括 val)的元素。
[attr*=val] : 选择attr属性的值中包含字符串 val 的元素。

4. 伪选择器

伪选择器 —— 这些不选择实际元素,而是元素的某些部分,或仅在某些上下文中的元素。它们有两种主要类型 - 伪类和伪元素。

4.1 伪类(Pseudo-class)

CSS伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。
语法:selector:pseudo-class { property: value; }
例如:a:visited {} a:hover {} a:active {} a:focus {}

4.2 伪元素

pseudo classes (伪类)一样, 伪元素添加到选择器,但不是描述特殊状态,它们允许您为元素的某些部分设置样式。
语法 :selector::pseudo-element { property: value; }
所有伪元素:

::after                 元素的最后一个子元素
::before                元素的第一个子元素
::first-letter  (块级元素)第一行的第一个字母
::first-line      (块级元素)的第一行
::selection        用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。

5. 组合器和多个选择器

5.1 组合器

组合器.png

5.2 同一规则集上的多个选择器

语法 selector1,selector2 {property:value;}

6. CSS3中的一些选择器

6.1 CSS3 同级元素通用选择器

css3通用选择器.png

6.2 CSS3 属性选择器

css3属性选择器.png

6.3 CSS 3中与用户界面有关的伪类

css3界面相关伪类.png

6.4 CSS 3中的结构性伪类

CSS3中的结构性伪类.png

7. 参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • 1.CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 H...
    饥人谷_小侯阅读 855评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • id选择器 先看看class属性和id属性的区别吧。 id id用于定义唯一的标识符,它是一个全局属性,在整个HT...
    知更鸟_b4d4阅读 425评论 0 0
  • 分类 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型、class或 id...
    jtsky阅读 861评论 0 1
  • 不知道哪一天,头脑里有很强烈的欲望,就是每天都要放飞自己(天天起飞),觉得青春只有这十几年,好多人会怀缅青春...
    付思远阅读 257评论 0 0