CSS选择器有哪几种?举例轻松理解CSS选择器
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选择器的更多相关文章
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- CSS控制样式的三种方式优先级对比验证
入职已经一个月了,自此后,就好久没有写过博客了,在此先跟关注我的博友们说声抱歉.今天,在公司的一个培训作业的驱动以及伟哥那句“再不写博客就开除你”的监督下,我终于重拾旧爱,再次登录博客园,继续与大家分 ...
- 深入理解javascript选择器API系列第三篇——h5新增的3种selector方法
× 目录 [1]方法 [2]非实时 [3]缺陷 前面的话 尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuer ...
- 纯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 ...
- 提高CSS文件可维护性的五种方法
当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...
- CSS之旅——第二站 如何更深入的理解各种选择器
上篇我们说了为什么要使用css,这篇我们就从选择器说起,大家都知道浏览器会把远端过来的html解析成dom模型,有了dom模型,html就变成 了xml格式,否则的话就是一堆“杂乱无章”的string ...
随机推荐
- 使用Razor表达式 举数组和集合 精通ASP-NET-MVC-5-弗瑞曼
- Linux 常用工具sysstat之sar
sysstat包 iostat.sar.sa1和sa2命令都是sysstat包的一部分.它是Linux包含的性能监视工具集合: sar:收集.报告或存储信息(CPU.内存.磁盘.中断.网卡.TTY.内 ...
- Docker基础内容之仓库
前言 Docker提供了开放的中央仓库dockerhub,同时也允许我们使用registry搭建本地私有仓库.搭建私有仓库有如下的优点: 节省网络带宽,提升Docker部署速度,不用每个镜像从Dock ...
- docker 简单使用
1.docker 命令 docker start nginx https://www.w3cschool.cn/docker/windows-docker-install.html // docker ...
- Java虚拟机系列一:一文搞懂 JVM 架构和运行时数据区
前言 之前写博客一直比较随性,主题也很随意,就是想到什么写什么,对什么感兴趣就写什么.虽然写起来无拘无束,自在随意,但也带来了一些问题,每次写完一篇后就要去纠结下一篇到底写什么,看来选择太多也不是好事 ...
- CodeBlocks 断点调试
启动调试器 1. 一般,调试器的按钮可以在工具栏找到 如果没有,可以从view菜单项中调出 2. 设置断点 使用调试器时需要让程序在需要的位置中断,在启动调试器前设置断点如下,鼠标点击编辑器的左边即可 ...
- Arduino系列之LCD1602模块使用方法(一)
下面我将简单介绍LCD1602模块的使用方法: 1602液晶显示器(1602 Liquid Crystal Display,此后简称1602 LCD)是一种常见的字符液晶显示器,因其能显示16*2个字 ...
- 尝试在阿里云的Linux服务器器上安装拥有图形界面的Pycharm
在Linux服务器上跑Python项目发现每次从本地上传文件太过麻烦,于是打算在服务器上安装Pycharm直接写Pycharm代码. 去Pycharm的官网下载Linux版本(支持正版于是我下载了 ...
- C# WinForm 使用SMS接口发送手机验证码+图形验证码+IP限制
https://blog.csdn.net/IT_xiao_guang_guang/article/details/104299983 前言 1.发送手机验证码用的是网建的SMS接口(http:/ ...
- Java中的8种基本数据类型
JAVA中的8种基本数据类型:byte short int long float double char boolean 特别说明: 1)char类型占2个字节,可以表示汉字.汉字和英文字符都占2个字 ...