HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式

伪类选择器:
表示元素的一种特殊的状态,比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框,当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
为没有访问过的链接设置颜色
a:link为没有访问过的链接设置一个颜色
a:visited为访问过的链接设置一个颜色,浏览器通过历史纪录来判断链接是否访问过。
由于涉及到了用户的隐私问题,所以使用visited伪类只能设置字体的颜色,
Hover伪类表示鼠标移入的状态 a:active表示被点击的状态 hover和active也可以为其他的元素设置,IE6,不支持对超链接以外的元素设置:hover和active
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
Input :focus{
background-color:yellow;}
为p标签中选中的样式使用样式可以使用::selection伪类
注意这个伪类在火狐中需要另一种样式-moz-selection
P::selection{
background-color:orange;}
使用伪元素来表示元素中的一些特殊的位置
首字母first-letter首行:first-line
P:first-letter{
color:red;
Font-zie:20px;
}
为p中的第一个字符来设置一个特殊的样式:
:before表示元素最前边的部分,一般before都需要结合content这个样式一起使用
通过content可以向before或after的位置添加一些的内容
:after表示的是元素的最后边
Title属性:这个属性可以给任何的标签指定,当鼠标移入到元素上时,元素中的title属性的值将会作为提示文字显示,,为所有具有title属性的p元素,设置一个背景颜色
属性选择器:可以根据元素中的属性或属性值来选取指定元素
语法[属性名]选取含有指定属性的元素
[属性名=“属性值”]选取含有指定属性值的元素
【属性名^=“属性值”】选取属性值以指定内容开头的元素p[class]{background-color:yellow;}
为title属性值是hello的元素设置一个背景颜色为黄色
P[title=hello(也可以加上双引号)]{background-color:yellow;}
为title属性值以ab开头的元素设置一个背景颜色为黄色
P[title^=”ab”]{background-color:yellow;}
【属性名$=“属性值”】选取属性值以指定内容结尾的元素
【属性名*=“属性值”】选取属性值以包含指定内容的元素
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
子元素选择器
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式

Body和div中的p都是第一个子元素
Nth-child可以选中任意位置的子元素
该选择器的后边可以指定一个参数,指定要选中第几个子元素even表示偶数位置的子元素
Odd表示奇数位置的子元素,
First-of-type,last-of-type,nth-of-type和first-child这些非常的类似,只不过child是在所有子元素中排列,而type是在当前类型的子元素中排列,
兄弟元素选择器:houyige1兄弟元素选择器:作用可以选中一个元素后紧挨者的指定的兄弟元素,语法前一个+后一个
Span+p{}
Spanp{}选中后边的所有的兄弟元素语法前一个后边所有符号为~
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
样式的继承
在CSS中祖先元素上的样式,也会被它后代的元素所继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动继承这些样式,
但是并不是所有的样式都被子元素继承,比如背景相关的样式都不会被继承,边框相关的样式,定位相关的样式,
选择器的优先级:
当使用不同的选择器选中同一个元素并且设置相同的样式,这样样式之间产生了冲突,最终到底采用哪个选择器定义的样式,由选择器(权重)决定,优先级高的优先显示,
优先级规则
:内联样式 优先级 1000
id选择器,优先级 100
类和伪类,优先级:10
元素选择器优先级1
通配* 优先级 0
继承的样式没有优先级
当选择器中包含多种选择器的时候,需要将多种选择器的优先级相加,然后再比较。但是注意,选择器的优先级计算不会超过他的最大的数量级,如果选择器的优先级是一样的,则选择靠后的样式,
并集选择器的优先级是单独计算,可以在样式的最后添加一个!important则此时该样式将会获得一个最高的优先级,将会优先于所有的样式显示甚至超过内联样式,尽量不用。
a的伪类
:link
:visited
:hover
:active
而这四个选择器的优先级是一样的,
hover不能写在active的后面,link和visit必须再hover和active的前面
文本标签及样式
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
em主要表示语气上的强盗,em在浏览器上默认使用斜体显示,
strong表示强调内容,比em更强烈,默认使用粗体显示
,i标签中的内容以斜体显示,
b标签中的内容会以加粗显示,h5规范中规定,对于不需要着重的内容而是单纯的加粗或者是斜体,就可以使用b和i标签,
small标签中的内容会比他的父元素的中的文字要小一些,在h5中使用small标签来表示一些细则一些的内容,比如:合同中的小子,网站的版权的声明,都可以使用small
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
网页中所有的加书名号的内容都可以使用cite标签表示参考的内容,比如书名歌名话剧名,电影名
q标签表示一个短的引用(行内引用)
q标签引用的内容浏览器会默认加上引号,
blockquote标签表示一个长引用(块级引用),
sup上标sub下标

HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
ins表示一个插入的内容(多了个下划线)
HTML5与CSS学习笔记 伪类选择器,属性选择器,子元素选择器,兄弟元素选择器,文本标签及样式
需要页面中直接编写一些代码,pre是一个预格式标签,会将代码中的格式保存,不会忽略多个空格,
code专门用来表示代码
我们一般结合使用pre和code来表示一段代码