css之选择器
CSS（Cascading层叠 Style样式 sheets表），是用来为网页添加样式的代码。 css选择器的作用是用于选中元素，以便为其添加样式 1.基础选择器
- 通用元素选择器（*），通常用于取消浏览器自带的样式，不常用
- id选择器（#id）
- class类选择器（.class）
- 标签选择器（p）
2.组合选择器 组合选择器，E,F表示基础选择器 E,F 多元素选择器，用逗号分割。同时匹配元素E和元素F E F 后代选择器，用空格分割。选择E元素所有的后代中满足F选择器条件的元素（不只是子元素，子元素所有的后代） E>F "子元素选择器，用>分割。 选择E元素所有的直接子元素中满足F条件的元素" E+F "直接相邻选择器，用+分割。 选择E元素之后相邻的下一个兄弟元素F，但要处于同一个父元素内"
E~F "普通相邻选择器（弟弟选择器）。 选择E元素之后的元素F（无论直接相邻与否），但要处于同一个父元素内"
3.属性选择器 html由元素组成，元素由标签（p/div等标签），内容和属性（例如class属性，class="haha"表示class属性的值为haha）组成。
可以通过标签的属性来选择元素
<input type="password">
input[type=password]{
width:30px;}[href^="http://"] {
background-color: #f0ad4e;
}[src$="gif"] {
border: 1px solid #ccc;
}4.伪类选择器 常用的
- E:link 匹配E所有未被点击的链接
- E:visited 匹配E所有已经被点击的链接
- E:active 匹配鼠标已经其上按下，还没有释放的E元素
- E:hover 匹配鼠标悬停其上的E元素
//a标签设置伪类时的顺序比较重要，会产生样式覆盖。
//如果a：visited的样式，放在最后，a链接被点击之后，再hover或者active都不会生效。
a{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}- E：focus 匹配处于焦点的元素
点击输入框等元素当光标闪烁可以输入内容时，就说明输入框处于焦点状态
- E:enabled 匹配表单中可用的元素
- E:disabled 匹配表单中禁用的E元素
- E:checked 匹配表单中，被选中的radio或者checkbox元素
- E::selection 匹配用户鼠标当前选中的元素，注意这里是由两个冒号的
::selection{
color:red;
} //被鼠标选中的文字会变红- E:first-child 匹配其父元素E的第一个子元素
- E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
- E:nth-child(n) 匹配其父元素的第N个子元素，第一个标号为1，相当于E:first-child
- E:nth-last-child(n) 匹配其父元素的倒数第N个子元素，第一个编号为1
小tip：先找到E的父元素，再选择它父元素下面第n个元素
- E:nth-of-type(n) 选择满足E选择器的元素的父元素内，满足E选择器条件的子元素中不同种类型（类型是指标签，如p标签和div标签是不同种类型）第N个子元素
小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再选择这些元素同种类型的第N个
- E:nth-last-of-type(n) 与nth-of-type(n) 作用类似，但是倒着匹配的
小tip：先找到E的父元素，再选择它父元素下面满足E条件的元素，再倒着选择这些元素同种类型的第N个
- E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
- E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
5.伪元素选择器 伪元素选择器前面有两个冒号（::），可以添加到选择器的末尾以选择元素的某个部分。
- E::first-line 匹配E元素内容的第一行
- E::first-letter 匹配E元素内容的第一个字母
- E::before 在E元素内部首位生成一个伪元素，插入生成的内容
可用于清除浮动，主要是简化标签
div::before{
content:"aa";
width:0px;
}- E::after 在E元素内部最后生成一个伪元素，插入生成的内容
6.选择器优先级
- 普通场景
1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
.child{
color:red !important;
}2、作为style属性写在元素标签上的内联样式
3、id选择器
4、类选择器
5、伪类选择器
6、属性选择器
7、标签选择器
8、通配符选择器
9、浏览器自定义
- 复杂场景下：
标记为ABCD
1. 行内样式:<div style="xxx"></div> ==>a
2. id选择器: ==>b
3. 类，属性选择器和伪类选择器 ==>c
4. 标签选择器和伪元素选择器 ==>d然后根据选择器去分类计算，最后先比较a的值，a相同就比较b，以此类推。数值更高，优先级更高！例如：
* {} /a=0 b=0 c=0 d=1/-> /0,0,0,1/
p {} /a=0,b=0,c=0,d=1/-> /0,0,0,1/
a:hover {} /a=0,b=0,c=1,d=1/-> /0,0,1,1/
ul li {} /a=0,b=0,c=0,d=2/-> /0,0,0,2/
h1+input[type=hidden]{} /a=0,b=0,c=1,d=2/-> /0,0,1,2/
ul ol li.active {} /a=0,b=0,c=1,d=3/->/0,0,1,3/
#ct .box p {} /a=0,b=1,c=1,d=1/-> /0,1,1,1/
div#header:after {} /a=0,b=1,c=0,d=2/-> /0,1,0,2/
style="" /a=1,b=0,c=0,d=0/ ->/1,0,0,0/7.例子
<style>
.box:first-child {
color: red;
/* 输出第一个div.box变红 */
}
.box:first-of-type {
background: blue;
/* 第一个div标签的div.box 、p.box变蓝背景 */
}
.box :first-child {
font-size: 30px;
/* .box后代第一个孩子div.item变成3opx */
}
.box :first-of-type {
font-weight: bold;
/* .box后代第一个div和p类型div.item和p.item变成粗体 */
}
</style>
<div class="container">
<div class="box">div.box</div>
<p class="box">p.box</p>
<div class="box">div.box</div>
<div class="box">
<div class="item">div.item</div>
<p class="item">p.item</p>
</div>
<p class="box"></p>
</div>
</body>