CSS(Cascading层叠 Style样式 sheets表),是用来为网页添加样式的代码。 css选择器的作用是用于选中元素,以便为其添加样式 1.基础选择器
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.伪类选择器 常用的
//a标签设置伪类时的顺序比较重要,会产生样式覆盖。
//如果a:visited的样式,放在最后,a链接被点击之后,再hover或者active都不会生效。
a{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:green;
}
a:active{
color:yellow;
}
点击输入框等元素当光标闪烁可以输入内容时,就说明输入框处于焦点状态
::selection{
color:red;
} //被鼠标选中的文字会变红
小tip:先找到E的父元素,再选择它父元素下面第n个元素
小tip:先找到E的父元素,再选择它父元素下面满足E条件的元素,再选择这些元素同种类型的第N个
小tip:先找到E的父元素,再选择它父元素下面满足E条件的元素,再倒着选择这些元素同种类型的第N个
5.伪元素选择器 伪元素选择器前面有两个冒号(::),可以添加到选择器的末尾以选择元素的某个部分。
可用于清除浮动,主要是简化标签
div::before{
content:"aa";
width:0px;
}
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>