HTML5学习-Day4
来源:互联网 发布:张艺兴泰国人气知乎 编辑:程序博客网 时间:2024/05/21 12:48
前面三天的学习后,发现HTML部分倒是很好好理解和学习,大部分内容都和Word文档很像,主要是Css样式部分,由于样式的多样性,要记的也很多,所以今天花了很多时间主要用于深入了解Css的选择器,内容由网上收集整理而来
基本选择器
1. 通配符选择器 ( * )
通配所有元素,也可以选择某元素下的所有元素
*{ //样式内容 } //也可以 .class * { //样式内容}
2. 元素选择器 ( E )
直接使用元素名,这是css中最常用的而且最基本的选择器
p{ //P元素的样式内容 }
3. 类选择器 ( .class )
使用前需在元素内定义类名 class="xx" 若是多类名,则使用空格区分开 clas="xx yy"
.xx{ //样式内容 }//多类选择器.xx .yy{ //样式内容}
注意:多类选择器不被IE6所支持
4. ID选择器 ( #id )
使用前需对元素定义id名称 id="xx" id是一个页面中唯一的值
#xx{ //样式内容 }
注意:在考虑选择id还是class时可以这样考虑: 具有唯一性的使用id选择器,公用及可重用时使用class
5. 后代选择器 ( E F )
E代表父元素 F代表子元素/孙元素 即E元素的所有后代(子,孙,或者更深)
.xx P{ //class="xx"的元素的 后代所有P元素,不仅仅是子元素p //样式内容 }
6. 子元素选择器 ( E>F )
大致同后代选择器,不同的是F仅仅为子元素,没有更深
.xx>P{ //class="xx"的元素的 所有子元素P //样式内容 }
注意:IE6不支持子元素选择器
7. 相邻兄弟元素选择器 ( E+F )
首先E,F必须有相同的父元素,其次满足F前面有E 满足以上条件则选择这个F
.xx+P{ //class="xx"的元素和P元素拥有同一父元素,且P元素前面有class="xx"的元素时 选择P元素 //样式内容 }
注意:IE6不支持子元素选择器
8. 通用兄弟元素选择器 ( E~F )
与相邻兄弟元素选择器相似,只不过选中的是相邻的所有F元素,可以这样理解,E和F拥有相同的父元素,当F前面有E时 选中与E后面所有相邻的F
a~P{ //a元素和P元素拥有同一父元素,且P元素前面有a元素时 选择a元素后面所有相邻的p元素 //样式内容 }
注意:IE6不支持子元素选择器
9.群组选择器
将具有相同样式的元素分组在一起,每个选择器之间用逗号分隔开
a,p{ //a元素和P元素样式相同 //样式内容 }
属性选择器
1. E[attr]
最简单的一种,某选择器内部的某个属性的元素,不论属性值
a[href]{ //所有拥有href属性的a元素 //样式内容 }
注意:IE6不支持子元素选择器
2. E[attr=”value”]
同上,但属性规定了具体的属性值
a[href="www.baidu.com"]{ //所有拥有href="www.baidu.com"属性的a元素 //样式内容 }
注意:IE6不支持子元素选择器
3. E[attr~=”value”]
指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“~”不能不写 value必须与词列表中的某一个词相匹配
// 假设 我有三个a元素 title分别为 title="xx aa bb" , title="yy xx",title="aa bb"a[title~="xx"]{ //选中词列表中 匹配的xx的a元素则是代表选中了前两个a元素 //样式内容 }
注意:IE6不支持子元素选择器
4. E[attr^=”value”]
选择attr属性以value开头的所有元素
a[href^="www."]{ //所有href属性值以"www."开头的a元素 //样式内容 }
注意:IE6不支持子元素选择器
5. E[attr$=”value”]
同上相反,选择attr属性以value结尾的所有元素
.xx[href$=".png"]{ //所有href属性值以".png"结尾的类名为class="xx"元素 //样式内容 }
注意:IE6不支持子元素选择器
6. E[attr*=”value”]
选择attr属性中包含value的所有元素
.xx[href$*="hi"]{ //所有href属性值包含"hi"的且类名为class="xx"元素 //样式内容 }
注意:IE6不支持子元素选择器
7. E[attr|=”value”]
选择attr属性等于value或者以 value- 开头的所有元素
.xx[lang$|="zh"]{ //所有lang属性值等于"zh"或者以"zh-"开头的且类名为class="xx"元素 //样式内容 }
注意:IE6不支持子元素选择器
伪类选择器
1. 动态伪类
这些伪类并不存在与HTML中,而只有当用户和网站交互的时候才能体现出来
动态伪类分为两种
锚点伪类 其先后顺序遵守爱恨原则 LoVe/HAte
:link 没有访问时内容
:visited 被访问过后的内容
:hover 悬浮在上时的内容
:active 激活链接那一下的内容用户行为伪类
:hover
:active
:focus 成为焦点 常用语表单元素
注意:
hover在IE6下只有a元素支持
active只有IE6-7不支持
focus在IE6-7下不支持
2. UI元素伪类
:enabled 元素可用状态下:disabled 元素不可用状态下:checked 元素被选中状态下:unchecked元素未被选中状态下
以上只是列举部分
3. nth选择器
:first-child 选择某元素的第一个元素:last-child 选择某元素的最后一个元素:nth-child(n)选择某元素的一个或多个特定的元素 其中n是固定参数,从0开始 n可做基本的操作,例如 n+1/2*n 等等:nth-last-child(n) 选择某元素的一个或多个特定元素,从最后开始计算:nth-of-type(x)选定指定的元素 x为自己输入的数字:nth-last-of_type(x) 选定指定的元素,从后面开始计算:first-of-type 选择一个上级元素下的第一个同类子元素:last-of-type 选择一个上级元素下的最后一个同类子元素:only-child 选择的元素是它的上级元素的唯一一个子元素:only-of-type 选择一个元素,是它上级元素的唯一一个相同类型的子元素:empty 选择的元素里面没有任何内容
4. 否定选择器(:not)
额,直接上栗子
input:not([type="submit"]){ border:1px solid red;}
上面这个栗子就很好的解释了否定选择器的作用,所有input都加边框,除了submit外
今天就到这里.头好大
0 0
- HTML5学习-Day4
- html5初学day4[作业]
- java学习笔记day4
- CCNA学习笔记Day4
- 学习笔记Day4
- Android学习笔记day4
- java学习day4
- Git学习 <day4>
- Python学习day4作业
- Python学习,Day4
- js学习day4
- Java学习--day4-partone
- Java学习--day4-parttwo
- DAY4学习笔记
- DAY4学习视频笔记
- 计算机网络学习笔记day4
- Day4:学习shell script
- python学习日志--day4
- cmake使用
- JS 将 string 转换成为 number
- 查看文件被占用的进程 NtQueryObject NtQueryInformationFile NtQuerySystemInformation
- 关于ppp协议,我的疑问????
- [leetcode] Gray Code
- HTML5学习-Day4
- 日语学习之沪江N3基础 20150624 -5
- 浅析python 中__name__ = '__main__' 的作用
- Android布局文件-错误
- Oracle数据库创建表ID字段的自动递增
- [IOS]JASidePanels(侧滑栏)的使用
- 30年程序员经验总结
- 正确使用stl map的erase方法
- C++11新特性总结