常用选择器
- 元素选择器
- id选择器
- 类选择器
- 通配选择器
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选择器</title>
<style>
/*
将所有的段落设置为红色(字体)
元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
示例：p{} h1{} div{}
*/
h1{
color:blue;
}
p{
color: red;
}
/*
id选择器（id是唯一的）
作用：根据元素的id属性值选中唯一一个元素
语法：#id属性值{}
示例：#first{}
*/
#first{
color: blue;
}
/*
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
注意：一个class属性可对应多个值，值之间用空格隔开
css中尽量多的使用类选择器
*/
.favorite{
color: gold;
}
.love{
color: orange;
}
/*
通配选择器
作用：选中页面中的所有元素
语法：*
注意：在有其它选择器的情况下，下面的代码并不会起到修饰作用
*/
*{
color: black;
}
</style>
</head>
<body>
<h1>雾霭有时晴</h1>
<p id="first">风吹向哪里啦，雨ye懒得下</p>
<p>若非雾霭放晴了，没人关心它</p>
<p>醉了，就这样吧</p>
<!--
class 是html中标签的属性，它和id类似，
不同的是class可以重复使用
-->
<p class="favorite">想不出不想啦，看不透都别看啦</p>
<p class="favorite">睡不着不睡啦，算不出的别算啦</p>
<p class="favorite">写不出别写啦，唱不出的都作罢</p>
<p class="favorite love">纵生风雨雷电时，我收工接你回家</p>
</body>
</html>
复合选择器
- 交集选择器
- 选择器分组（并集选择器）
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>复合选择器</title>
<style>
/* 将class为red的标签元素设置为红色 */
.red{
color: red;
}
/*
将class为red的div标签字体设置为30px
交集选择器
作用：选中同时符合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意：
交集选择器中如果有元素选择器，必须使用元素选择器开头
*/
div.red{
font-size: 30px;
}
.red.big{
font-size: 50px;
}
/*
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
示例：#b1,.p1,h1,span{}
*/
h1, span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<p class="red">我是p标签</p>
<p class="red big">我是p2标签</p>
<h1>我是h1标签</h1>
<span>我是span标签</span>
</body>
</html>
关系选择器
- 子元素选择器
- 后代元素选择器
- 选择下一个兄弟元素
- 选择后面所有兄弟元素
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>关系选择器</title>
<style>
/*
为div的子元素span设置一个字体颜色 为红色
（为div直接包含的span设置一个字体颜色）
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
*/
div.red > span{
color: red;
}
div > span{
color: orange;
}
div > p > span{
color: greenyellow;
}
/*
后代元素选择器
作用：选中指定元素内的指定 后代 元素
语法：祖先 后代
*/
div span{
color: blue;
}
/*
选择下一个兄弟
作用：选中紧挨着前一个元素的后一个元素
语法：前一个 + 后一个
*/
p + span{
color: lightseagreen;
}
/*
选择下边的所有兄弟元素
语法：前一个 ~ 后面的元素
*/
p ~ span{
color: lightseagreen;
}
</style>
</head>
<body>
<div class="red">
我是一个div
<p>
我是div中的p元素
<span>我是p中的div元素</span>
</p>
<span>我是div中的span元素1</span>
<span>我是div中的span元素2</span>
<span>我是div中的span元素3</span>
</div>
<span>我是div外的span</span>
<div>
我是第二个div
<span>我是第二个div中的span</span>
</div>
</body>
</html>
属性选择器
- 五种属性选择器
示例代码
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/*
第一种
标签名+[属性名] 也可以直接是 [属性名]
第二种
标签名+[属性名=属性值] 或 [属性名=属性值]
第三种
标签名+[属性名^=属性值] 或 [属性名^=属性值]
选择属性值以指定值开头的元素
第四种
标签名+[属性名$=属性值] 或 [属性名$=属性值]
选择属性值以指定值结尾的标签元素
第五种
标签名+[属性名*=属性值] 或 [属性名*=属性值]
选择属性值中含有某值的元素
*/
p[title]{
color: red;
}
p[title=poem]{
font-size: 40px;
}
p[title^=po]{
font-style: italic;
}
p[title$=ng]{
font-size: 30px;
}
p[title*=o]{
background-color: black;
}
</style>
</head>
<body>
<!--
title属性
作用：设置关于元素的额外信息
这些信息通常会在鼠标移到元素上时显示一段工具提示文本
-->
<p title="poem">人生若只如初见，当时只道是寻常。</p>
<p title="poem2">潭中鱼可百许头，皆若空游无所以。</p>
<p title="poem3">落霞与孤鹜齐飞，秋水共长天一色。</p>
<p title="song">天青色等烟雨，而我在等你。</p>
<p>我是无情的参照物</p>
</body>
</html>
伪类选择器
用到就查表
常见伪类选择器
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/*
伪类：不存在的类
- 用于描述一个元素的特殊状态
比如：第一个子元素、被点击的元素、鼠标移入的元素
- 伪类一般情况下使用 : 开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(i) 选中第i个子元素
i可取特殊值：
n 第n个 n的范围为0到正无穷，全选
2n 或 even 表示选中所有偶数位的元素
2n+1 或 odd 表示选中奇数位的元素
以上伪类都是根据所有元素进行排序的，元素种类可不同
:first-of-type
:last-of-type
:nth-of-type()
- 这几个伪类在功能上和上述的相似，不同点是
它们是在同类型元素中进行排序。
- :not() 否定伪类
- 将符合条件的元素从选择器中去除
*/
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: blue;
}
ul > li:nth-child(odd){
font-size: 20px;
}
ul > li:not(:nth-child(3)){
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>ul是无序列表</li>
<li>关系选择器</li>
<li>ol是有序列表</li>
<li>伪类选择器</li>
<li>最后的骑士</li>
</ul>
</body>
</html>
超链接伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>超链接的伪类</title>
<style>
/*
:link 用来表示没访问过的链接标签（正常的链接）
:link 和 :visited 两个伪类只能对链接标签使用
*/
a:link{
color: red;
}
/*
:visited 用来选择访问过的链接标签
由于保护隐私的原因，所以visited这个伪类只能修改链接的颜色
*/
a:visited{
color:blue;
}
/*
:hover 用来表示鼠标移入的状态
*/
a:hover{
color: yellow;
font-size: 30px;
}
/*
:active 用来表示鼠标点击的
*/
a:active{
color: green;
}
</style>
</head>
<body>
<!--
1. 访问过的链接
2. 没访问过的链接
-->
<a href="https://www.baidu.com">百度</a>
<br><br>
<a href="https://www.baidu.com">百度一下</a>
</body>
</html>
伪元素选择器
注意 ::before 和 ::after
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>伪元素</title>
</head>
<style>
p{
font-size: 30px;
}
/*
伪元素：表示页面中一些特殊的并不真实的存在的元素（特殊的元素）
格式：伪元素使用::开头
::first-letter 选择第一个字母
::first-line 选择第一行
::selection 表示选中的内容
::before 表示元素的开始(标签中内容之前)
::after 表示元素的最后（标签中内容最后一个元素的下一个）
- before 和 after 必须结合content来使用，否则不会有效果
-content 中的内容无法被选中
*/
.first::first-letter{
font-size: 50px;
}
.first::first-line{
background-color: red;
}
.second::selection{
background-color: yellow;
}
div::before{
content: 'ABC';
color:blue;
}
div::after{
content: 'Bye';
color:green;
}
</style>
<body>
<div>
Hello,How dare you?
</div>
<p class="first">
我家门前有两棵树，一棵是枣树，另一棵还是枣树。
</p>
<p class="second">
我家里有两只宠物，一只是黑白狗，另一只是黑白兔。
</p>
</body>
</html>
选择器权重
- 权重的大小比较
- 权重的相加
- !important
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选择器的权重</title>
<style>
/*
样式的冲突
- 当通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值
此时就发生了样式的冲突
发生样式冲突时，使用哪个样式由选择器的权重(优先级)决定
选择器的权重（由高到低）：
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
通配选择器 0，0，0，0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加比较，最后优先级越高，越优先显示
分组选择器单独计算。
选择器的累加不会超过其最大的数量级，比如再多的类选择器相加
也不会超过id选择器
如果优先级计算后相同，则优先使用代码位置靠下的样式
可以再某一个样式的后边添加 !important, 则此时该样式会获得最高优先级，超越内联样式
*/
div{
color: yellow;
}
.red{
color: red;
}
</style>
</head>
<body>
<div id="box1" class="red">我是一个无情的div</div>
</body>
</html>
扫一扫
1329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
