对CSS3选择器的研究(详解)


Posted in HTML / CSS onSeptember 16, 2016

属性选择器

[title]:选择带有title属性的元素

[title='hello']:选择属性是title并且值是hello的元素

[title~='hello']:选择属性是title并且部分值是hello的元素,hello需要是单独的值,以空格分开

[title*='hello']:选择属性是title并且其中包含了hello的元素

[title|='hello']:选择属性是title并且值是以hello开头并且允许hello后面以-的任意字符

[title^='hello']:属性以hello开头的任意字符

[title$='hello']:属性以hello结束的任意字符

[title^='hello'][title$='.py']:选择属性以hello开头并且以.py结束的元素

连结符

h1~p:选择h1元素后面的所有同级p元素

p~p:选择p元素后面的所有同级p元素,除了第一个p元素

h1+p:选择h1元素后面的第一个同级p元素

伪类选择器

nth系列,数字

nth-child():按照位置来算数

nth-of-type():按照类型来算数

nth-last-child():从末尾按照位置开始算

nth-last-of-type():从末尾按照类型来算数

通过(-n+number)来指定选择前几个元素

-n会向负数方向增加先从0开始,-1,-2,-3...

使用:nth-child(odd)或:nth-child(even)实现隔行变色。
 
单个选择

first-child:选择第一个元素,按位置
first-of-type:选择第一个元素,按类型

last-child:选择最后一个元素,按位置
last-of-type:选择最后一个元素,按类型

only-child:没有其他兄弟元素的时候会被选中
only-of-type:可以有兄弟元素但要类型不同

使用only-of-type可以让你从其他类型元素中挑选出一个元素来,反之only-child需要元素单独存在才行。这个肯定有大作用,待发现。

伪类:target

通过:target来模拟点击事件

<a href="#a" id="a"></a>

利用target实现tab栏切换

使用target伪类,可以轻松地突出显示用户要阅读的评论

利用target制作的tab切换,当然它还是有很多缺陷的,不过大家可以通过它扩展扩展。

对CSS3选择器的研究(详解)

:empty

选择没有子元素并且没有文本节点的元素

:root

选择根元素,在HTML中root永远是html元素

:not

参数支持传递一个元素甚至其他伪类选择器,但不支持传递连结符以及伪元素
选择除了指定参数以外的任意元素

:optional

选择不是必须填写的input元素

也就是获取到input没有加required属性的元素

:required

选择有加required属性的元素

:read-write

获取可读写的input元素

:read-only

获取只可读的input元素

:out-of-range

以上这篇对CSS3选择器的研究(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
CSS3控制HTML元素动画效果
Feb 08 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
CSS3中使用RGBa来调节透明度的教程
May 09 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 #HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 #HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 #HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 #HTML / CSS
CSS3实现简易版的刮刮乐效果
Sep 27 #HTML / CSS
纯DOM+CSS3实现简单的小风车动画
Sep 27 #HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 #HTML / CSS
You might like
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
让python同时兼容python2和python3的8个技巧分享
2014/07/11 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
如何利用python进行时间序列分析
2020/08/04 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
行政助理的岗位职责
2014/02/18 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
文明生主要事迹
2014/05/25 职场文书
法律系毕业生求职信
2014/05/28 职场文书
责任书范本
2014/08/25 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
文明旅游倡议书
2015/04/28 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
古诗之感恩老师
2019/10/24 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书