HTML5--(2)属性选择器+结构性伪类+伪类
一.属性选择器
- [att] 匹配所有具有att属性的
- [att=val] 匹配所有att属性等于“val”的
- [att~=val] 匹配所有att属性包含“val”或者等于“val”的(val必须是一个完整词)
- [att|=val] 匹配所有att属性仅仅只等于以val-’ 开头的或等于“val”(比如说zh-cn)
- [att*=val] 匹配所有att属性 包含’val’的字母 (val可以是字母) 类似模糊查询
- [att^=val] 匹配所有att属性 ‘val’开头的 (val可以是字母)
- [att$=val] 匹配所有att属性 ‘val’结束的 (val可以是字母)
二.结构性伪类
- E:nth-child(n) 表示E父级的所有子元素集合中的,第n个子节点(从前往后数 兄弟同类型标签 不可跨越其他类型标签 按所有标签索引顺序去选择)
- E:nth-last-child(n) 表示E父级的所有子元素集合中的,第n个子节点,从后向前计算 (从后往前数)
(需E选择器能选中此元素) - E:nth-of-type(n) 表示E元素父级的子元素是E集合,第n个字节点,(兄弟同类型标签 可跨越其他类型标签 按同类型标签索引顺序去选择)
- E:nth-last-of-type(n) 表示E父级的第n个字节点,从后向前计算
(需E选择器能选中此元素,且区分标签类型) - E:nth-child(odd) 匹配奇数行 同p:nth-child(2n-1)
- E:nth-child(even) 匹配偶数行 同p:nth-child(2n)
- E:empty 表示E元素中没有子节点(不能有空格,回车)。注意:子节点包含文本节点
三.伪类
- E:target 当a标签获取焦点href=”所对应的 E元素锚点的对象(超链接跳转对象)
- E:disabled 表示不可点击的表单控件disabled(禁止选中)
- E:enabled 表示可点击的表单控件
- E:checked 表示已选中的checkbox或radio (鼠标点击时)
- E:first-line 表示E元素中的第一行
- E:first-letter 表示E元素中的第一个字符(首字)
- E::selection 表示E元素在用户选中文字时
- E:not(selector) 选择非 selector 选择器的每个元素。
- E~F 表示E元素后的所有兄弟F元素(~不需要紧挨着 +需要紧挨着 毗邻)
其他属性 input::placeholder 改变文本框中提示字体样式
兼容写法input::-webkit-input-placeholder
HTML5--(2)属性选择器+结构性伪类+伪类的更多相关文章
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS笔记——属性选择器
1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...
- CSS 选择器之基本选择器 属性选择器 伪类选择器
CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className) 所有浏览器都支持类选择器,但多类选择器(.classNa ...
- 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...
- CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title> ...
- css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器
伪元素选择器 :before 和 :after 添加的位置 :before --- 第一个子节点 :after --- 最后一个子节点 特点 1.默认是 inline 元素 2.必须包含 conten ...
- python 全栈开发,Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)
一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
随机推荐
- openvswitch dpdk
作者:张华 发表于:2016-04-07版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 硬件要 ...
- ADV三星
#include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...
- linux网络流量实时监控工具之iptraf 【个人比较喜欢用的流量监控软件】
linux网络流量实时监控工具之iptraf IPTraf是一个网络监控工具,功能比nload更强大,可以监控所有的流量,IP流量,按协议分的流量,还可以设置过滤器等,如下图 对监控网络来说,这个更适 ...
- jmeter5.1.1启动提示not able to find java executable or version的解决办法
安装jmeter5.1.1完成后,启动报错not able to find java executable or version,如下图所示 解决办法: 1.在环境变量PATH的最后添加如下内容:%S ...
- [Swift实际操作]八、实用进阶-(2)Swift语言中的三种消息传递模式
本文将通过响应按钮的点击事件,来演示Target-Action消息传递机制,该机制主要用于响应用户的界面操作.打开创建的空白项目.然后在左侧的项目导航区,打开视图控制器的代码文件:ViewContro ...
- linux安装spark-2.3.0集群
(安装spark集群的前提是服务器已经配置了jdk并且安装hadoop集群(主要是hdfs)并正常启动,hadoop集群安装可参考<hadoop集群搭建(hdfs)>) 1.配置scala ...
- 38.oracle开篇
先不聊技术,咱先闷骚一下.刚看完“解忧杂货店”的第二章“深夜的口琴声”,这一章勾起了我万千思绪,小说毕竟是小说,可能与现实不符,但能引发思考,反应一个普遍问题就是好小说.看到一半我还特意去酷狗上搜了一 ...
- Oracle数据库学习(四):学习中的遇到的问题
一.xhost图形化界面安装问题 问题1:运行xhost +命令,出现命令没有找到错误 原因:Linux系统没有安装xhost图形化包. 解决办法:安装xhost图形化包,命令如下: yum what ...
- 洛谷P3830 [SHOI2012]随机树(期望dp)
题面 luogu 题解 第一问: 设\(f[i]\)表示\(i\)步操作后,平均深度期望 \(f[i] = \frac {f[i - 1] * (i - 1)+f[i-1]+2}{i}=f[i-1]+ ...
- 浏览器页面的显隐对js的setInterval()执行所产生的bug
前段时间,所写的一个”js无间隙滚动效果“,当页面离开后,重新返回时,会出现动画的错乱.我以为是因为我代码逻辑的原因导致的,但是,当在火狐浏览器上进行浏览时却没有动画错乱的问题. 于是乎,在网上查找是 ...