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. python property()函数:定义属性

    正常情况下,类包含的属性应该是隐藏的,只允许通过类提供的方法来间接的实现对类属性的访问和操作. class Person: #构造函数 def __init__(self, name): self.n ...

  2. 关于github显示不出来图片的问题

    今天打开github,突然发现图标图片等都显示不出来了. 控制台看了一下 百度查找了Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID ...

  3. JSON Web Token 是什么?

    免费获得官方JWT手册并深入学习JWT吧! 简介 JSON Web Token(缩写JWT),是一套开放的标准(RFC 7519),它定义了一种紧凑且自URL安全的方式,以JSON对象的方式在各方之间 ...

  4. 一次完整的OCR实践记录

    一.任务介绍 这次的任务是对两百余张图片里面特定的编号进行识别,涉及保密的原因,这里就不能粘贴出具体的图片了,下面粘贴出一张类似需要识别的图片. 假如说我的数据源如上图所示,那么我需要做的工作就是将上 ...

  5. Docker基础内容之资源限制

    内存限制 --memory:内存限定,格式是数字加单位,单位可以为 B.K.M.G.最小为 4M. --memory-swap:交换分区大小限定 CPU限制 --cpus:表示分配给容器可用的cpu资 ...

  6. ts和nts的区别 (redis中碰到)

    [TS指Thread Safet y线程安全 NTS即None-Thread Safe 非线程安全] 区别:[TS   NTS] TS指Thread Safety,即线程安全,一般在IIS以ISAPI ...

  7. oracle问题之SYSTEM表空间不足 (二)

    杂症二.SYSTEM表空间不足报错 一.杂症: PLSQL登录,报错: ORA-00604: 递归 SQL 层  出现错误 ORA-01653: 表.无法通过(在表空间中)扩展 ORA-02002: ...

  8. 【Nginx入门系列】第二章 外部无法访问Nginx服务器

    问题 Nginx服务器已经搭建成功,并且已经启动(如下图所示),并且可以ping通nginx服务器的ip地址,但是外部机子无法访问 Nginx服务器(没法显示欢迎页面) 解决方案 一般这种情况是出现在 ...

  9. Java爬虫框架之WebMagic

    一.介绍 WebMagic是一个简单灵活的Java爬虫框架.基于WebMagic,你可以快速开发出一个高效.易维护的爬虫. 二.如何学习 1.查看官网 官网地址为:http://webmagic.io ...

  10. SSH(三)

    在Spring中引用属性文件:    优点:        1.防止随意更改jdbc的连接        2.给不懂代码的人使用    步骤:        1.数据库连接信息写在属性文件中      ...