css样式丰富了页面的标签显示, 其可以是内联, 也可以是在style标签里面写, 也可以外部link引入
选择器的种类
* 伪类专门用来表示元素的一种的特殊的状态，
* 比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
* 为没访问过的链接设置一个颜色为绿色
* :link
* - 表示普通的链接（没访问过的链接）
a:link{
color: yellowgreen;
}
* 为访问过的链接设置一个颜色为红色
* :visited
* - 表示访问过的链接
* 浏览器是通过历史记录来判断一个链接是否访问过,
* 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
a:visited{
color: red;
}
* :hover伪类表示鼠标移入的状态
a:hover{
color: skyblue;
}
* :active表示的是超链接被点击的状态
a:active{
color: black;
}
* :hover和:active也可以为其他元素设置
* IE6中，不支持对超链接以外的元素设置:hover和:active
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
* 文本框获取焦点以后，修改背景颜色为黄色
input:focus{
background-color: yellow;
}
* 为p标签中选中的内容使用样式
* 可以使用::selection为类
* 注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
* 兼容火狐的
p::-moz-selection{
background-color: orange;
}
* 兼容大部分浏览器的
p::selection{
background-color: orange;
}
* 使用伪元素来表示元素中的一些特殊的位置
* 为p中第一个字符来设置一个特殊的样式
p:first-letter {
color: red;
font-size: 20px;
}
* 为p中的第一行设置一个背景颜色为黄色
p:first-line {
background-color: yellow;
}
* :before表示元素最前边的部分
* 一般before都需要结合content这个样式一起使用，
* 通过content可以向before或after的位置添加一些内容
* :after表示元素的最后边的部分
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
为所有具有title属性的p元素，设置一个背景颜色为黄色
* 属性选择器
* - 作用：可以根据元素中的属性或属性值来选取指定元素
* - 语法：
* [属性名] 选取含有指定属性的元素
* [属性名="属性值"] 选取含有指定属性值的元素
* [属性名^="属性值"] 选取属性值以指定内容开头的元素
* [属性名$="属性值"] 选取属性值以指定内容结尾的元素
* [属性名*="属性值"] 选取属性值以包含指定内容的元素
p[title]{
background-color: yellow;
}
为title属性值是hello的元素设置一个背景颜色为黄色
p[title="hello"]{
background-color: yellow;
}
为title属性值以ab开头的元素设置一个背景颜色为黄色
p[title^="ab"]{
background-color: yellow;
}
为title属性值以c结尾的元素设置一个背景颜色
p[title$="c"]{
background-color: yellow;
}
p[title*="c"]{
background-color: yellow;
}
为第一个p标签设置一个背景颜色为黄色
* :first-child 可以选中第一个子元素
* :last-child 可以选中最后一个子元素
body > p:first-child{
background-color: yellow;
}
p:last-child{
background-color: yellow;
}
* :nth-child 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数，指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
p:nth-child(odd){
background-color: yellow;
}
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常的类似，
* 只不过child，是在所有的子元素中排列
* 而type，是在当前类型的子元素中排列
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
为span后的一个p元素设置一个背景颜色为黄色
* 后一个兄弟元素选择器
* 作用：可以选中一个元素后紧挨着的指定的兄弟元素
* 语法：前一个 + 后一个
span + p{
background-color: yellow;
}
* 选中后边的所有兄弟元素
* 语法：前一个 ~ 后边所有
span ~ p{
background-color: yellow;
}
为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
*
* 否定伪类：
* 作用：可以从已选中的元素中剔除出某些元素
* 语法：
* :not(选择器)
p:not(.hello){
background-color: yellow;
}
* 涉及到a的伪类一共有四个：
* :link
* :visited
* :hover
* :active
* 而这四个选择器的优先级是一样的。
样式的继承
像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,
利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。
但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
选择器的优先级
* 当使用不同的选择器，选中同一个元素时并且设置相同的样式时，
* 这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定
* 优先级高的优先显示。
* 优先级的规则
* 内联样式 ， 优先级 1000
* id选择器，优先级 100
* 类和伪类， 优先级 10
* 元素选择器，优先级 1
* 通配* ， 优先级 0
* 继承的样式，没有优先级
*
* 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，
* 但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，
* 则使用靠后的样式。
*
* 并集选择器的优先级是单独计算
* div , p , #p1 , .hello{}
*
* 可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，
* 将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
网友评论