一、选择器(4+3+3+*)
(1)4个基本选择器:通用选择器,id选择器,class选择器(类就是被重用的,一个标签可以有多个类,一个类可以用在多个标签上,挂类法编写样式),标签选择器。
(2)3套复杂选择器:后代选择器(空格表示后代,多层选择,不固定层次),交集选择器(不用任何字符隔开,后面的选择器一般是class或者id),并集选择器(逗号表示并集)。
(3)3个非常用选择器:子元素选择器(E>F),直接相邻选择器(E+F,+号表示紧邻
当前选中元素后紧跟的后续一个元素),普通相邻选择器(E~F,~兄弟后续元素
当前选中元素后的所有符合F选择器的元素)。
(4)伪类选择器:
•超链接选择::link、:visited、:hover、:active
•第一个子元素:E:first-child
伪对象/伪元素:
•文字选择:E::first-letter、E::first-line
•插入内容:E::before、E::after
(5)群组选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,如:
p, td, li {
line-height:20px;
color:#c00;
}
(6)属性选择器:根据元素的属性来匹配的,其属性可以是标准属性也可以是自定义属性,如:
[title] {margin-left: 10px}
注意事项:由于对CSS的解释是自上而下的,对于一个元素的相同属性描述,放在下面的会覆盖掉位于上面的属性描述,因此我们在对元素的选择中一定要注意书写顺序,如:
a:visited {color: #00FF00;text-decoration: none}
a:hover {color: #FF00FF;text-decoration: underline}
采用这样的书写顺序,无论链接有没有被访问过,只要当鼠标移到链接上,链接都会变成蓝色并有下划线。但是,如果采用下面的书写顺序:
a:hover {color: #FF00FF;text-decoration: underline}
a:visited {color: #00FF00;text-decoration: none}
如果链接被访问过,则当你鼠标移到链接上时不会变成蓝色并有下划线,依然保持绿色。
二、CSS继承性
(1)定义:有些样式属性,在给指定标签设置的时候,同时也给后代设置了,此性质就是继承性,指被包在内部的标签将拥有外部标签的样式性,即子元素可以继承父元素的属性。
(2)条件:继承到样式的标签和定义样式的标签必须是从属关系(后代标签关系)对文本样式设置的基本属性才能被继承(颜色color\样式text\字体font\行属性line)
所有关于对于盒子模型(div、span等)的属性设置(border、定位、布局)都不能被继承
如:
<!DOCTYPEhtml>
<html>
<headlang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
<span>这是第三段文字</span>
</div>
</body>
</html>
显示效果:
测试文本
三、层叠性:指的是样式的优先级,当产生冲突时以优先级高的为准
(1)如何判断选择器的层叠效果:
①通过权值判断法;
②通过每一个选择其中的id选择、类选择、标签选择数量来计做权值(ICE);
③先比较id权值,再次比较类、最后比较标签;
④全部一样比较顺序
数权值前提是一定要保证每一条选择器必须要选中的指定元素
(2)权值判定注意点:
①看是否所有的选择器都选中了指定标签,如果全部选中就数权值
②如果没有选中,则遵循就近原则
③都选中同一级别,则看个体元素的权值
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<style type="text/css">
.div1 .div2 .div3 { //没选中
color: red;
}
p{
color: blue;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
<div class="div3">
<p>测试文本</p>
</div>
</div>
</div>
</body>
</html>
显示效果:
important标记,优先级最高
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<metacharset="utf-8">
<styletype="text/css">
p{
color: red!important;
/*important 只能作用在属性值中!
且对于继承无用不影响就近原则*/
}
p{
color: blue;
}
</style>
</head>
<body>
<pclass="p1">测试文本</p>
</body>
</html>
显示效果:
四、小结: