逆战班第三周--css选择器的总结

一、基本选择器
1、标签选择器 权重0001
div{background:blue;} 给所有div元素设置蓝色背景色
2、class选择器 权重0010
.cas{background:blue;} 给所有class属性值为cas的元素设置蓝色背景色
3、id选择器 权重0100
#ide{background:blue;} 给所有id属性值为ide的元素设置蓝色背景色

二、群组选择器
当要给不同元素设置相同的样式时，可以用群组选择器，群组选择器相当于把不同的选择器写到一起，然后用用,(逗号)分隔。群组选择器没有统一的权重，群组中每个选择器的权重都是它们各自的权重
div,.abc,#fly{background:blue;} 给所有的div元素、class属性值为abc的元素、id属性值为fly的元素设置蓝色背景色

三、通用选择器
给所有的元素设置样式，权重0000
*{background:blue;} 给所有元素设置蓝色背景色

四、层次选择器
层次选择器的权重为各个选择器相加的和
1、后代选择器
选择器之间用空格隔开
div p{background:blue;} div元素之中的p元素设置蓝色背景色
2、子选择器
选择器之间用>隔开
div>p{background:blue;} 是div元素的直接子元素且是p元素的元素设置蓝色背景色
3、相邻兄弟选择器
选择器之间用+隔开
div+p{background:blue;} div元素之后紧邻的第一个元素是p元素的话，设置其背景色为蓝色
4、后续兄弟选择器
选择器之间用~隔开
div~p{background:blue;} div元素之后所有的p元素背景色设置为蓝色

五、属性选择器
属性选择器的权重为0010
1、[id]{background:blue;} 设置了id属性的元素
2、[id=ide]{background:blue;} id值为ide的元素
3、[id~=ide ]{background:blue;}当id属性是词列表时，里面含有单词ide的元素(词列表指的是空格链接多个单词，ide是词列表中的某个一)
4、[id|=ide]{background:blue;} id值以ide-或ide开头的元素
5、[id^=ide]{background:blue;} id值以ide开头的元素
6、[id$=ide]{background:blue;} id值以ide结尾的元素
7、[id*=ide]{background:blue;} id值含有ide的元素

六、伪元素选择器
伪元素选择器的权重为0001
::selection以外的伪元素前面的:可以只写一个
1、::before
div::before{content:””;display:block;width:10px;height:10px;background:blue;} 在div内容的最前面插入一个蓝色方块
2、::after
div::after{content:””;display:block;width:10px;height:10px;background:blue;} 在div内容的最后面插入一个蓝色方块
注意：::before和::after必须与content一起使用，否则不生效，如果不需要内容则content=””。插入的内容和类型根据content的值改变，当content=’txt’时，插入一个内容是txt的行内元素；当content=url(地址)时，插入一个行内块元素。元素类型可以用display改变
3、::first-letter
div::first-letter{color:blue;} 设置div内第一个字符的颜色为蓝色
4、::first-line
div::first-line{color:blue;} 设置div内第一行文本的颜色为蓝色
注意：::first-letter和::first-line只能作用于块元素
5、::selection 选择被用户选取的元素部分。只能改变背景颜色和字体颜色
::selection{color:blue;} 被选择的文字颜色变成蓝色

七、伪类选择器
伪类选择器的权重为0010
1、动态伪类
(1):link 未被访问过的超链接，只能作用于a标签
(2):visited 被访问过的超链接，只能作用于a标签
(3):hover 当前鼠标悬浮的元素
(4):active 当前鼠标点击的元素
注意：当a标签同时用到以上4种选择器的时候，顺序不能乱
(5):focus 当前获得焦点的元素，适合表单元素使用
2、UI状态伪类 适合表单元素使用
(1):enabled 可用的元素
(2):disbled 禁用的元素
(3):checked 被选中的元素
3、否定伪类
:not() 括号里面写条件
:not(div) 选择元素类型不是div的元素
4、目标伪类
:target 和锚点一起使用，设置锚点目标元素的样式
5、语言伪类
:lang() 括号里面填语言的简写
使用：
css部分 :lang(zh){font-size: 50px;}
html部分 <div lang=“zh”>中华文化博大精深</div>
效果 改变了lang值为zh的元素的字体大小
6、结构伪类
(1):root 选择文档的根元素 即html
(2):empty 选择没有内容的元素
(3):first-child 属于其父元素的第1个子元素
(4):last-child 属于其父元素的最后1个子元素
(5):only-child 是其父元素的唯一子元素的那个元素
(6):nth-child(n) 属于其父元素的第n个子元素
(7):nth-last-child(n) 属于其父元素的倒数第n个子元素
(8)p:first-of-type 元素中第1个出现的p元素
(9)p:last-of-type 元素中最后1个出现的p元素
(10)p:only-of-type 属于其父元素的唯一1个元素类型时p的元素
(11)p:nth-of-type(n) 元素中第n个出现的p元素
(12)p:nth-last-of-type(n) 元素中倒数第n个出现的p元素