CSS3-使用CSS选择器(第二部分)
<!-- 使用结构性伪类选择器 --> <!-- 使用根元素选择器 --> <style type = "text/css"> :root{ border: thin black solid; padding: 4px; } </style> <!-- 总是返回html元素 --> <!-- 使用子元素选择器 --> <!-- 使用 :first-child 选择器 --> <style type = "text/css"> :first-child{ border: thin black solid; padding: 4px; } </style> <!-- 选择了所有元素的第一个元素 --> <style type = "text/css"> p > span:first-child{ border: thin black solid; padding: 4px; } </style> <!-- 选择了p元素下第一个子span元素 --> <!-- 使用 :last-child 选择器 --> <style type = "text/css"> :last-child{ border: thin black solid; padding: 4px; } </style> <!-- 使用 :only-child 选择器 --> <!-- 父元素包含的唯一子元素,只包含一个元素 --> <style type = "text/css"> :only-child{ border: thin black solid; padding: 4px; } </style> <!-- 使用 :only-of-type 选择器 --> <style type = "text/css"> :only-of-type { border: thin black solid; padding: 4px; } </style> <!--使用:nth-child选择器 --> <!-- :nth-child(n) 选择父元素的第n个子元素 --> <!-- :nth-last-child(n) 选择父元素的倒数第n个子元素 --> <!-- :nth-of-child(n) 选择父元素定义类型的第n个子元素 --> <!-- :nth-last-of-child(n) 选择父元素定义类型的倒数第n个子元素 --> <style type = "text/css"> body > :nth-child(2) { border: thin black solid; padding: 4px; } </style> <!-- 使用UI伪类选择器 --> <!-- 选择启用或禁用元素 --> <!-- :enabled :disabled --> <style type = "text/css"> :enabled { border: thin black solid; padding: 4px; } </style> <!-- 选择已勾选的元素 --> <style type = "text/css"> :checked + span { border: thin black solid; padding: 4px; } </style> <!-- 选择默认元素 --> <!-- 从一组类似的元素中选择默认元素,例如:提交按钮总是表单的默认按钮 --> <style type = "text/css"> :default { border: thin black solid; padding: 4px; } </style> <!-- 选择有效和无效的 input 元素 --> <!-- :valid :invalid --> <input required/> <input required/> <input type = "submit" value = "submit" /> <style type = "text/css"> :invalid { outline: medium solid red; } :valid { outline: medium solid blue; } </style> <!-- 当(required)的input中未填值时为 invalid , 填值后为 valid --> <!-- 选择限定范围的 input 元素 --> <!-- :in-range :out-of-range --> <input min = "0" max ="100"/> <input type = "submit" value = "submit" /> <style type = "text/css"> :in-range { outline: medium solid red; } :out-of-range { outline: medium solid blue; } </style> <!-- 选择必须和可选的input元素 --> <!-- :required 选择含required属性的input元素 --> <!-- :optional 选择不含required属性的input元素 --> <input required/> <input /> <input type = "submit" value = "submit" /> <style type = "text/css"> :required { outline: medium solid red; } :optional { outline: medium solid green; } </style> <!-- 使用动态伪类选择器 --> <!-- 使用 :link 和 :visited 选择器 --> <!-- :link 选择超级链接 --> <!-- :visited 选择已访问的超级链接 --> <style type = "text/css"> :link { border: thin black solid; padding: 4px; } :visited { color: grey; } </style> <!-- 使用 :hover 选择器 --> <!-- :hover 选择鼠标悬停在其上的任意元素 --> <style type = "text/css"> :hover { border: thin black solid; padding: 4px; } </style> <!-- 使用 :active 选择器 --> <!-- :active 选择当前被用户激活的元素,多数情况下是鼠标点击时 --> <style type = "text/css"> :active { border: thin black solid; padding: 4px; } </style> <!-- 使用 :focus 选择器 --> <!-- :focus 选择当前获得焦点的元素 --> <style type = "text/css"> :focus { border: thin black solid; padding: 4px; } </style> <!-- 使用否定选择器 --> <!-- :not() --> <style type = "text/css"> a:not([href*="apple"]) { border: thin black solid; padding: 4px; } </style> <!-- 选择 href 属性值中没有apple的a元素 --> <!-- 使用 :empty 选择器 --> <!-- :empty 选择没有属性值的元素 --> <!-- 使用 :lang 选择器 --> <!-- :lang(<目标语言>) --> <style type = "text/css"> :lang(en) { border: thin black solid; padding: 4px; } </style> <!-- 选择其内容采用英语表达的语言 --> <!-- 使用 :target 选择器 --> <style type = "text/css"> :target { border: thin black solid; padding: 4px; } </style> <!-- 选择URL地址 #id 所匹配的元素 -->
相关推荐
页面总体布局设计、链接页面的CSS的文件、要遵 循设计页面的通用规则,设计#heard对象部分由网页的logo部分和导航区构成,在 是设计#content对象部分,content分为三列,第一行由分为头片新闻区,新闻区 和公告栏,...
CSS3选择器--关系选择器 关系选择器 01 子代选择器(>) 子代选择器主要用来选择某个元素的第一级子元素。 定义 语法结构 E>F{ CSS样式属性 } 说明 选择所有作为E元素的子元素F。 子代选择器(>) 示例:设置 h1 ...
上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色: 尽管上面两个demo的最后效果一致,但是两个选择器之间存在差异是必然的。 对于:nth-child选择器,在简单白话文中,意味着选择一...
动画是使元素从一种样式逐渐变化为另一种样式的效果。 创建CSS3动画 设置@keyframes动画规则 animation应用动画规则 ...第二步:选择器绑定动画规则 要求:名称+时长 可以简写 animation:change 5s; 3 动画属性 Thanks
第 3434 章 项目 1-1-博客前端:封装库--CSS--CSS 选择器[[[[下]]]]学习要点:1.问题所在2.设置代码主讲教师:李炎恢合作网站:htt
第6章 级联样式单与CSS选择器 150 6.1 样式单概述 151 6.2 CSS样式单的基本使用 152 6.3 CSS选择器 158 6.4 伪元素选择器 167 6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 ...
第6章 级联样式单与CSS选择器 第7章 字体与文本相关属性 第8章 背景、边框和补丁相关属性 第9章 大小、定位、轮廓相关属性 第10章 盒模型与布局相关属性 第11章 表格、列表相关属性及media query 第12章 变形...
div h1~div: 应返回一个节点,但是Sizzle没有找到节点另外div.querySelectorAll("body *")会返回节点所以在以元素为context的查询中不使用querySelectorAll进行优化3, 性能将选择器编译成函数再进行查询,除了第一次...
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient ...
1.在属性后面使用 2.作为 style 属性写在行内的样式 3.id 选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.标签本身自带样式或者继承样
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器;第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——...
* /修订摘要:================= 1.0.1:第一次升级1.0.2:错误修复-样式CSS Brush本身的版本1.0.3:Feature1-新的菜单元素{Rating,Support,Dondon}及其样式1.0.3:Feature2-带编号的单位(如px,em),使用向上/...
我们能看到这一句Line CSS Selector Seen, Seen before, Unseen, :hover,告诉我们” 列出CSS选择器的状态: 绿色–表示当前扫描看到的,=保留 深绿色–的以前的扫描中看到的,=保留 红色–的表示在当前和以前扫描中...
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
* css选择器 * 冒泡原理 * 如果后面的表达式无效,只返回有效表达式匹配的结果 * author chenyipeng * e-mail: yia0223@gmail.com * ps: 如有bug请多多包涵 * 参考: jquery css选择器 * 目前实现 * #id ...
HTML5与CSS3权威指南 目录(?)[+] 第一章Web时代的变迁 第二章HTML5与HTML4的区别 ...第四章表单与文件 第五章绘制图形 第六章多媒体播放 第七章本地存储 ...第二十二章CSS 3的其他重要样式和属性 第二十三章综合实例