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. Mysql.新建数据库和用户

    //建立数据库 drop database if exists 你的db名; create database 你的db名 CHARACTER SET utf8 COLLATE utf8_general ...

  2. mybatis in查询

    原文地址:https://blog.csdn.net/u012427355/article/details/79580561 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集 ...

  3. 从零开始ming的多人联机游戏--游戏客户端(1)六边形地图

    打算做的小游戏是一个多人联机的策略类游戏,类似于<文明>那种 游戏的玩法并不确定,开这个坑主要是为了入门后端开发,顺便熟悉下游戏开发 这篇文章使用unity,实现了六边形单元地图的创建.后 ...

  4. jmeter使用—响应断言

    断言的作用:一个HTTP请求发出去,怎么判断执行的任务是否成功呢?通过检查服务器响应数据,是否返回预期想要的数据,如果是,判断任务成功,反之任务失败. 1.添加断言:选中一个取样器,右键->添加 ...

  5. JS基础——ATM机终端程序编写(3.0)

    利用函数进行代码实现,要点:将每一项操作单独写成一个函数,在需要时进行调用,弄清参数的传递. 创建模拟账户 使用数组创建账户 let user = ["xiaohei", 1234 ...

  6. 19_07_8校内训练[sort]

    题意 一个排列,每次选一个子序列按顺序放在开头,要求变成升序的操作次数不超过17次,给出方案.n<=1E5. 思考 对于ai=aj-1且i<j的数字,一定要保持其相对顺序.可以根据这个关系 ...

  7. kafka for centos7

    https://blog.csdn.net/wqh8522/article/details/79163467

  8. equals()和hashCode()使用总结

    equals()和hashCode()使用总结 equals() Object类中的equals方法和"=="是一样的,没有区别,即俩个对象的比较是比较他们的栈内存中存储的内存地址 ...

  9. Eclipse PyDEV 和 SVN 插件安装指南

    安装PyDEV 及 SVN 插件 一.Eclipse->help->install newsoftware 配置pydev解释器 在Eclipse菜单栏中,点击Windows ->P ...

  10. CUDA学习(六)之使用共享内存(shared memory)进行归约求和(M个包含N个线程的线程块)

    在https://www.cnblogs.com/xiaoxiaoyibu/p/11402607.html中介绍了使用一个包含N个线程的线程块和共享内存进行数组归约求和, 基本思路: 定义M个包含N个 ...