文章目录
选择器
1.块元素和内联元素
块元素
div标签是一个块元素，里面的内容会独占一行
p标签，h1，h2…也是块元素
div标签与这些标签的不同是div是一个纯粹的块元素，并没有任何默认样式，用来进行页面布局
内联元素
也叫行内元素，span是一个内联元素，元素中的内容只占自身大小
a,iframe,img…也是内联元素
span标签是一个纯粹的内联元素，与div标签类似，没有任何语义，用来选中文本样式
一般用块元素包含内联元素，但a元素可以包含任意元素，p元素里面不能放任何块元素
2.基本选择器
类选择器
用class标签起一个类名，用.类名设置样式，一个元素可以有多个class属性
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
.haha{
color:red;
}
</style>
<body>
<p class="haha">这是一个p标签</p>
</body>
</html>
id选择器
用id标签设置一个名字，一个元素只有一个id,不能重复id名
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
#haha{
color:red;
}
</style>
<body>
<p id="haha">这是一个p标签</p>
</body>
</html>
元素选择器
想为那个元素里的内容设置样式就写元素名{}
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
p{
color:red;
}
</style>
<body>
<p>这是一个p标签</p>
</body>
</html>
选择器分组
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
/*
若想为id为haha，class为hehe，还有h1设置一个字体颜色
*/
#haha,.hehe,h1{
color:red;
}
</style>
<body>
<h1>悯农</h1>
<p class="hehe">锄禾日当午</p>
<p id="haha">汗滴禾下土</p>
<p id="lala">谁知盘中餐</p>
<p class"tutu">汗滴禾下土</p>
</body>
</html>
交集选择器
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
/*
若想为class为hehe并且为p元素设置一个字体颜色
*/
span.hehe{
color:red;
}
</style>
<body>
<h1>悯农</h1>
<p class="hehe">锄禾日当午</p>
<p id="haha">汗滴禾下土</p>
<p id="lala">谁知盘中餐</p>
<span class"hehe">汗滴禾下土</span>
</body>
</html>
3.结构选择器
后代元素选择器
为div标签中的后代元素span设置字体
格式:祖先元素 后代元素{}
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
div span{
color:red;
}
</style>
<body>
<div>
<p><span>我是p标签里的span</span></p>
<span>我是div标签里的span</span>
</div>
<span>我是body标签里的span</span>
</body>
</html>
子元素选择器
为div标签中的子元素span设置字体颜色
格式:父元素 > 子元素
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
div > span{
color:red;
}
</style>
<body>
<div>
<p><span>我是p标签里的span</span></p>
<span>我是div标签里的span</span>
</div>
<span>我是body标签里的span</span>
</body>
</html>
兄弟元素选择器
为span标签后的p标签设置字体颜色
格式:前一个+后一个{}
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
span+p{
color:red;
}
</style>
<body>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</body>
</html>
4.伪类选择器
四个常见伪类选择器
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
/*
为普通(没访问过)的链接设置字体颜色
*/
a:link{
color:red;
}
/*
为访问过的链接设置颜色(visited伪类只能设置字体颜色)
*/
a:visited{
color:red;
}
/*
表示鼠标移入时的状态
*/
a:hover{
color:blue;
}
/*
表示超链接被点击的状态
*/
a:active{
color:blank;
}
</style>
<body>
<a href="http://www.baidu.com">这是一个超链接</a>
<a href="http://www.baidu111111.com">这是一个超链接</a>
</div>
</body>
</html>
伪元素
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
/*
为p中第一个字符设置样式
*/
a:first-letter{
color:red;
}
/*
为p中的第一行设置样式
*/
a:first-line{
background:red;
}
</style>
<body>
<p>
我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦，我是一个p标签啦啦啦啦啦啦啦
</p>
</div>
</body>
</html>
子元素的伪类
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
/*
指为第一个子元素是p元素的那一行设置字体
p:last-child类似
p:nth-child(n)类似,选中任意位置的子元素
even表示偶数位置的子元素
odd表示奇数位置的子元素
*/
p:first-child{
color:red;
}
/*
type缩小范围
p标签的子元素的第一个
p:last-of-type
p:nth-of-type与第一个类似
*/
p:first-of-type{
color:red;
}
</style>
<body>
<div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span标签</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</body>
</html>
否定伪类
除了这个元素别的都设置样式
元素：not（选择器）{}
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
p.not(.hello){
background:red;
}
</style>
<body>
<div>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</body>
</html>
5.属性选择器
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“ab”]选取以ab开头的属性值的元素
[属性名$=“ab”]选取以c结尾的属性值的元素
[属性名*=“ab”]选取属性值中含有ab的元素
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<style type="text/css">
p[title]{
background:blue;
}
p[title="hello"]{
background:blue;
}
p[title^="ab"]{
background:blue;
}
</style>
<body>
<div>
<p title="hello">我是一个p标签</p>
<p title="world">我是一个p标签</p>
<p title="abc">我是一个p标签</p>
<p title="abbc">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</div>
</body>
</html>
6.样式的继承
祖先元素的样式是什么样子，后代元素的样式就是什么样子
不是所有样式都能被继承
<!doctype html>
<html>
<meta charset="utf-8">
<title>网页</title>
<body>
<div style="font-size:50px;">
<p>我是一个p标签中的文字
<span>我是一个p中的span标签</span>
</p>
</div>
<p>我是一个p标签</p>
</body>
</html>
7.选择器的优先级
权重
当有多个选择器对同一个元素中的内容进行样式设置时，会根据选择器的权重来决定用哪个选择器设置的样式
选择器权重大小：
- 内联样式， 优先级，1000
- id选择器， 优先级，100
- 类和伪类， 优先级，10
- 元素选择器，优先级，1
- 通配*， 优先级，0
- 继承的样式，没有优先级
当有多个选择器时需相加再比较，如p#p的权重就为101
若选择器的优先级一样，求使用靠后的选择器设置的样式
并集选择器的优先级都是单独计算，不相加
在样式的最后添加一个!important,就会获得一个最高的优先级(在开发中尽量避免使用!important)
伪类的顺序
a:link
a:visited
a:hover
a:active
四个选择器的优先级是相同的
但a:active不能排在a:hover前，a:link和a:visited不能排在a:hover和a:active之后
所以伪类选择器的一般顺序都是：
a:link
a:visited
a:hover
a:active
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
