第7章-选择器+伪类
一.选择器
1.基础选择器
通配符选择器
标签/元素选择器
类选择器
id选择器
2.高级选择器
E,F (多元素选择器)
同时匹配所有E元素或F元素,E和F之间用逗号分隔
eg: div,p{width:100px;height:50px;}
E F(后代选择器)
匹配所有属于E元素后代的F元素,E和F之间用空格分隔-包含子元素和孙元素
eg:div ul li{list-style:none;}
E > F(子元素选择器)
匹配所有E元素的直接子元素F
eg:div>p{color:maroon;}
E + F(毗邻元素选择器)
匹配所有紧随E元素之后的同级元素F
eg:li+li{color:red;}
3.属性选择器
[attr]匹配具有attr属性的E元素
eg:a[href]{ color:red; }
[attr=val] 匹配所有attr属性等于“val”的E元素
eg:a[href="www.baidu.com"]
[attr~=val] 匹配所有attr属性包含“val”或者等于“val”的E元素
eg:img[src ~= ”images”]{ margin:10px;}
[attr|=val] 匹配所有attr属性以“val”整个开头或’val-‘的E元素
eg:img[alt |= buy]{color:red; }
[attr1][attr2=val] 匹配所有拥有attr1属性同时具有attr2等于’val’的元素
eg:a[href][title=图片]{text-decoration:underline;}
二.伪类(可以替代js实现动态效果)
1.伪元素选择器
(1):before
.triangle:before{content:"";display:block;border:10px solid transparent;border-right:10px solid #56a9d3;
}
在某个元素加入triangle类名,就可以在元素前面添加一个三角形
(2):after
2.a伪类选择器
:link 匹配所有未被点击的链接
:visited 匹配所有已被访问的链接(鼠标点击、释放,才访问了)
:hover 匹配鼠标悬停其上的E元素
:active 匹配鼠标已经其上按下、还没有释放的E元素
3.伪类hover
(1)改变元素自己
.box:hover{ }
(2)改变元素下面的子元素
.box:hover img{ }
(3)改变元素的毗邻元素
.box:hover +.box1{display:block;}
效果等同于JQuery的mouseon、mouseout事件,用它来实现效果更省代码。对前面的选择器更加了解可以用更多的功能实现,这里只列举出我自己验证过、实现过的。
第7章-选择器+伪类相关推荐
- 03-高级选择器,属性选择器,伪类选择器
高级选择器分为: 后代选择器 子代选择器 并集选择器 交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .container p{color: red; ...
- CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
HTML是网页的裸框架,但是现在已经是2020年了,你再做出一个80年代的网页来,恐怕是没HR要你了.所以学习CSS的重要性可想而知,CSS用途很广,是一门独立的编程语言,能美化网页,也能进一步提高自 ...
- 前端 CSS的选择器 伪类选择器
伪类选择器 常用的几种伪类选择器. 伪类选择器一般会用在超链接a标签中 没有访问的超链接a标签样式: a:link {color: blue; } <!DOCTYPE html> < ...
- css3-属性选择器 伪类:root :not() :first-of-type :first-child 伪元素 ::first-letter ::first-line ::selection等等
用户代理(User Agent,简称UA)是一个特殊字符串头,使得服务器能够识别客户使用的操作系统及版本.CPU 类型.浏览器及版本.浏览器渲染引擎.浏览器语言.浏览器插件等 属性选择器 语法 E[a ...
- html5子代选择器,伪类、子代、毗邻选择器 — IE6已逝,这些优秀的选择器你怎能不用?...
那些被遗忘的选择器 在IE6~8"统治"网络世界的时代,CSS2版本曾经推出过几种选择器,而这几种选择器由于对IE6支持程度较差,使得前端开发工程师不得不将其舍弃.而今,IE6已逝 ...
- 《图解CSS3:核心技术与案例实战》——2.4节动态伪类选择器
本节书摘来自华章社区<图解CSS3:核心技术与案例实战>一书中的第2章,第2.4节动态伪类选择器,作者 大漠,更多章节内容可以访问云栖社区"华章社区"公众号查看 2.4 ...
- css 选择器(标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器)
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器 通配符选择器 标 ...
- js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的)
js进阶 10-8 伪类选择器有哪几类(自己不用,永远不是自己的) 一.总结 一句话总结:自己不用,永远不是自己的. 0.学而不用,却是为何? 自己不用,永远不是自己的,有需求的时候要想到它,然后操作 ...
- CSS属性选择器和部分伪类
p[name]{background:red;} 只使用属性名 p[name=ghr]{background:red;} 指定属性名,并指定了该属性的属性值 p[name~=old]{backgrou ...
最新文章
- TinyMind邀你写诗!100小时GPU,等你来领取!
- mysql用户ip登录失败怎么办_MySQL使用IP地址登录 ERROR 1045 (28000) Access denied for use...
- R语言获得所有Aesthetics(美学映射)参数:使用长表输出、使用宽表输出
- tensorflow图像分割unet_AAAI2020 | 医学图像分割的Nonlocal UNets
- Python基础之:函数
- 参数整定临界比例度实验_实验低温浴“秘方”,调节两个溶剂的比例实现零下10度到78度定温配制...
- Price merge是通过org change的callback来trigger的
- 模式识别中的特征提取及其内在意义
- roi计算_计算开放式硬件项目的ROI的6个步骤
- Codeforces Beta Round #61 (Div. 2)
- Linux ubuntu 串口调试工具
- 年薪50万的程序员_2018年这类程序员工资最高!年薪50万只能算一般
- 计算机用户密码开机设置,计算机开机密码和屏保密码设置指南
- sh: warning: setlocale: LC_ALL: cannot change locale (zh_CN.GB18030)
- 你有用过 Github 的 Gist 吗?
- 字符串转化int类型(整数)
- 各种FIFO硬件设计(FIFO概念、异步、同步、非2次幂深度FIFO)
- Citus集群拓扑架构介绍
- RecyclerView布局中解决edittext监听错乱
- CISSP考试的难点到底在哪里