1-css选择器

css选择器:
ID选择器 #idName{}
选择id为idName的元素
类选择器 .className
选择所有class为className的元素
元素选择器 p
选择所有的p标签

复合选择器:
div.b1
选择所有class为b的div元素

复合选择器:
p,#idName,.className
选择所有p标签,id为idName的元素,class为className的元素

通用选择器:
* 选择所有的元素

后代选择器:
.c1 .c2
选择.c1元素内的所有.c2元素

伪类/伪元素:
a:link
正常链接的样式
a:visited
访问过的链接的样式
a:hover
鼠标在上面的链接的样式
a:active
鼠标正在点击时链接的样式

其它:
获取焦点: p:focus:
取得焦点的p元素,p省略为所有元素
指定元素前:
p:before 在指定元素的前面添加内容,p省略为所有元素
指定元素后:
p:after 在指定元素的后面添加内容,p省略为所有元素
选中的元素:
p:selection 选中的元素的样式,,p省略为所有元素

其它选择器:
首字母 p:first-letter
p标签的首字母
首行 p:first-line
p标签的首行

属性选择器:
p[属性名]
选择包含属性名的所有p标签,p省略为所有元素
p[属性名="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值完全相同
p[属性名~="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值中的一个
p[属性名|="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,"属性值-"开头或完全包含"属性值"
p[属性名^="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值开头
p[属性名$="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值结尾
p[属性名*="属性值"]
选择属性名的值为属性值的所有p标签,p省略为所有元素,属性值包含在中间

子元素选择器:
父元素 > 子元素
选择父元素中的子元素

<div>
<p>第一个元素</p>
<h>第二个元素</h>
<span>第三个元素</span>
<span>第四个元素</span>
</div>

:first-child

  :last-child
:nth-child
p:first-child  匹配到的是p元素,因为p元素是div的第一个子元素；
h1:first-child  匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个；
span:first-child  匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素；
:first-child  匹配到的是p元素,因为在这里div的第一个子元素就是p。

:first-of-type
:last-of-type
:nth-of-type
p:first-of-type  匹配到的是p元素,因为p是div的所有为p的子元素中的第一个，事实上这里也只有一个为p的子元素；
h1:first-of-type  匹配到的是h1元素，因为h1是div的所有为h1的子元素中的第一个，事实上这里也只有一个为h1的子元素；
span:first-of-type  匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是第一个。
:first-of-type  匹配到的是p元素

兄弟选择器
兄弟元素 + 兄弟元素{}
选择后一个兄弟元素
兄弟元素 ~ 兄弟元素{}
选择后面所有兄弟元素

否定选择器:
p:not(.not){}
所有除了.not的p元素

选择器的权重:
内联样式：权重是 1000
id选择器：权重是 100
类、属性、伪类选择器：权重是 10
元素选择器：权重是 1
通配符：权重是 0

 
样式的优先级:
内联式:直接写在html标签中
嵌入式:写在<head/>标签的<style type="text/css"/> 标签中
外部式:写在外部文件中,通过<link href="style.css" rel="stylesheet" type="text/css" />引用
内联式 > 嵌入式 > 外部式，但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。