CSS选择器汇总(清爽版)

1、元素选择器 标签名{ }

2、id选择器 #id属性值{ }

3、类选择器 ·class属性值{ }

4、选择器分组(并集选择器)

作用:通过它可以同时选中多个选择器对应的元素(通常用于集体声明)

语法:选择器1,选择器2,选择器n{ }

5、复合选择器(交集选择器)

作用:选择更准确更精细的目标元素并为其设置属性

语法:选择器1选择器2选择器n{ }

<!--注意选择器之间不能有空格,要紧挨在一起-->

6、通配选择器

作用:用来选中页面中所有的元素

语法:*{ }

7、后代元素选择器

作用:选中指定元素的指定后代元素

语法:祖先元素 后代元素{ }

8、子元素选择器

作用:选中指定父元素的子元素

语法:父元素>子元素

9、伪类选择器

伪类表示元素的一种特殊状态

:hover   移入时元素的状态

:visited  已被访问过后的元素的状态

:active  被点击时元素的状态

10、 属性选择器

作用:根据元素中的属性或属性值来选取指定元素

语法:[属性名]选取含有指定属性的元素

​ [属性名=“属性值”]选取含指定属性值的元素

​ [属性名^="属性值"] 选取属性值以指定内容开头的元素

​ [属性名$="属性值"] 选取属性值以指定内容结尾的元素

​ [属性名*="属性值"] 选取属性值包含指定内容的元素

11、兄弟元素选择器

+选择器

作用:选中一个元素后紧挨着的指定的兄弟元素

语法:前一个+后一个(作用在后一个)

~选择器

作用:选中后边所有的制定兄弟元素

语法:前一个~后边所有

CSS选择器有哪几种?举例轻松理解CSS选择器的更多相关文章

  1. 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器

    × 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...

  2. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  3. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  4. 11 CSS的三种引入方式和基本选择器

    <!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...

  5. CSS控制样式的三种方式优先级对比验证

    入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...

  6. 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法

    × 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...

  7. 纯CSS完成tab实现5种不同切换对应内容效果

    很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...

  8. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  9. CSS之旅——第二站 如何更深入的理解各种选择器

    上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...

随机推荐

  1. springmvc 简化Javaweb 简单应用

    第一步 : 导入外部jar包,放在如图目录下 第二步:简单配置web.xml 文件 <?xml version="1.0" encoding="UTF-8" ...

  2. 一图胜千言elasticsearch(lucene)的内存管理

  3. MySQL 相关规约(v1.0) (转)

    0)前言 a. 基本规约 [强制]表存储引擎必须使用InnoDB(针对主库一般是强制要求的) [强制]表字符集默认使用utf8,必要时候使用utf8mb4(个人踩坑:emoji表情存储问题)•说明:• ...

  4. python算法学习总结

    数据结构一维: 基础:数组array(string),链表Linked List 高级:栈stack,队列queue,双端队列deque,集合set,映射map(hash or map), etc二维 ...

  5. C++ lambda 分析

    lambda 表达式分析 构造闭包:能够捕获作用域中变量的匿名函数的对象,Lambda 表达式是纯右值表达式,其类型是独有的无名非联合非聚合类类型,被称为闭包类型(closure type),所以在声 ...

  6. Linux上部署web服务器并发布web项目

    近在学习如何在linux上搭建web服务器来发布web项目,由于本人是linux新手,所以中间入了不少坑,搞了好久才搞出点成果.以下是具体的详细步骤以及我对此做的一些总结和个人的一些见解,希望对跟我一 ...

  7. Redis(八):zset/zadd/zrange/zrembyscore 命令源码解析

    前面几篇文章,我们完全领略了redis的string,hash,list,set数据类型的实现方法,相信对redis已经不再神秘. 本篇我们将介绍redis的最后一种数据类型: zset 的相关实现. ...

  8. JavaWeb高级编程(上)

    好久没更新了,发一篇以前记录学习的笔记. 面向读者:已经具有丰富的Java语言和Java SE平台知识的软件开发者和软件工程师. 预掌握知识: Internet.TCP.HTTP协议 HTML(5) ...

  9. ORACLE ITL事务槽

    讲到ITL(事务槽)必定先说数据块,那么什么是数据块呢?先给大家上一个数据块结构图 数据块分别由块头.ITL(事务槽).表信息区.行信息区.块空闲区.行数据区组成,其中ITL用来记录在数据块发生的所有 ...

  10. SpringBoot之切面AOP

    SpringBoot提供了强大AOP支持,我们前面讲解过AOP面向切面,所以这里具体AOP原理就补具体介绍: AOP切面主要是切方法,我们一般搞一些日志分析和事务操作,要用到切面,类似拦截器: @As ...