后代选择器
HTML结构
标签之间的关系
祖先元素– 直接或间接包含后代元素的元素。
后代元素– 直接或间接被祖先元素包含的元素。
父元素– 直接包含子元素的元素。
子元素– 直接被父元素包含的元素。
兄弟元素– 拥有相同父元素的元素。
后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。语法：祖先元素 后代元素 后代元素 { }
属性选择器
<style type="text/css">
/*
* 为所有具有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;
}
</style>
子元素选择器
<style type="text/css">
/*
* 为第一个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;
}
</style>兄弟元素选择器
<style type="text/css">
/*
* 为span后的一个p元素设置一个背景颜色为黄色
* 后一个兄弟元素选择器
* 作用：可以选中一个元素后紧挨着的指定的兄弟元素
* 语法：前一个 + 后一个
*/
/*span + p{
background-color: yellow;
}*/
/*
* 选中后边的所有兄弟元素
* 语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
伪类和伪元素
需要选择本身没有标签，但是仍然易于识别的网页部位，比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器：伪类和伪元素。给链接定义样式有四个伪类可以让你根据访问者与该链接的交互方式，将链接设置成4种不同的状态。
正常链接a:link
访问过的链接a:visited（只能定义字体颜色）
鼠标滑过的链接a:hover
正在点击的链接a:active
其他
否定伪类- :not(选择器)
获取焦点– :focus
指定元素前– :before
指定元素后– :after
选中的元素– ::selection<style type="text/css">
/*
* 伪类专门用来表示元素的一种的特殊的状态，
* 比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
* 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
*/
/*
* 为没访问过的链接设置一个颜色为绿色
* :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::selection{
background-color: orange;
}
</style><style type="text/css">
/*
* 使用伪元素来表示元素中的一些特殊的位置
*/
/*
* 为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;
}
</style>样式的继承
在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
选择器的优先级
当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定 优先级高的优先显示。
优先级的规则
内联样式 ， 优先级 1000
id选择器，优先级 100
类和伪类， 优先级 10
元素选择器，优先级 1
通配* ， 优先级 0
继承的样式，没有优先级
当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。
并集选择器的优先级是单独计算
div , p , #p1 , .hello{}
可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级， 将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important
