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 ...
随机推荐
- ORM基础2 字段及其参数和meta
一.ORM简介 1.概念:ORM(Object Relational Mappingt ),对象关系映射 2.实质:类与数据库之间的映射 3.优点: 开发人员不用写数据库 4.缺点: 开发人员,数据库 ...
- Matplotlib从兴趣到实践
先看下Matplotlib实现的效果 是不是出现了也想敲一个的心动,那让我们一起来了解Matplotlib吧 Matplotlib安装 1.Windows系统安装Matplotlib 进入到cmd的命 ...
- 进击.net 三大框架
spring mybatis NHibernate
- 【WPF学习】第十九章 控件类
WPF窗口充满了各种元素,但这些元素中只有一部分是控件.在WPF领域,控件通常被描述为与用户交互的元素——能接收焦点并接受键盘或鼠标输入的元素.明显的例子包括文本框和按钮.然而,这个区别有时有些模糊. ...
- 面试官问你MyBatis SQL是如何执行的?把这篇文章甩给他
初识 MyBatis MyBatis 是第一个支持自定义 SQL.存储过程和高级映射的类持久框架.MyBatis 消除了大部分 JDBC 的样板代码.手动设置参数以及检索结果.MyBatis 能够支持 ...
- Python中将变量按行写入txt文本中
案例一: 讲数组a 循环写入名称为2.txt的文档中 # -*-coding:utf8-*- import requests from lxml import etree a=[1,2,3,4,5,6 ...
- Web自动化测试项目搭建目录
Web自动化测试项目搭建(一) 需求与设计 Web自动化测试项目(二)BasePage实现 Web自动化测试项目(三)用例的组织与运行 Web自动化测试项目(四)测试报告 Web自动化测试项目(五)测 ...
- 给定区间[-2的31次方, 2的31次方]内的3个整数A、B和C,请判断A+B是否大于C
题目描述给定区间[-2的31次方, 2的31次方]内的3个整数A.B和C,请判断A+B是否大于C. 输入描述:输入第1行给出正整数T(<=10),是测试用例的个数.随后给出T组测试用例,每组占一 ...
- 实验10: RIP
实验7-1 : RIPV1 实验目的通过本实验可以掌握:1. 在路由器上启动RIPv1 路由进程2. 启用参与路由协议的接口,并且通告网络3. 理解路由表的含义4. 查看和调试RIPv1 路由协议相 ...
- Android 之采用execSQL和rawQuery方法完成数据的添删改查操作
使用 SQLiteDatabase 操作 SQLite 数据库 [java] view plaincopy /* Android提供了一个名为SQLiteDatabase的类,该类封装了一些操作数据库 ...