01伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 需求一: 将ul里的第一个li自动一直设置为红色 */
/* 需求二:给所有诗句加背景色,除了l1 */
span:first-child{
color: red;
}
li:not(.l1){
background-color: green;
}
li{
/* 去除li的项目符号 */
list-style: none;
}
a{
/* 去除a标签的下划线 */
text-decoration: none;
}
h1{
/* 增加下划线 */
text-decoration: underline;
}
</style>
</head>
<body>
<a href="#">空链接</a>
<div><h1>沁园春·雪</h1></div>
<h3>毛泽东</h3>
<ul>
<span>测试</span>
<li>北国风光,千里冰封,万里雪飘。</li>
<li>望长城内外,惟余莽莽;大河上下,顿失滔滔。</li>
<li class="l1">山舞银蛇,原驰蜡象,欲与天公试比高。</li>
<li>须晴日,看红装素裹,分外妖娆。</li>
<li>江山如此多娇,引无数英雄竞折腰。</li>
<li>惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</li>
<li>一代天骄,成吉思汗,只识弯弓射大雕。</li>
<li>俱往矣,数风流人物,还看今朝。</li>
</ul>
</body>
</html>
一、伪类(不存在的类,特殊的类)
定义:不真实存在的类,它表示元素的一种状态
例如:第一名,倒数第一名,鼠标悬浮物,鼠标点击等
常用的伪类选择器
语法‘:’(冒号开头)
:first-child 第一个元素(所有子元素里面的第一个)
:last-child 最后一个元素
:nth-child() 选中第几个
特殊值:2n或even 偶数
2n+1或odd 奇数
n 所有
-以上这些伪类都是根据所有的子元素进行排序
:first-of-type 第一个元素(同标签里面的第一个)
:last-of-type 最后一个元素
:nth-of-type() 选中第几个元素
-以上这些伪类都是根据同类元素进行排序
二、:not() 否定伪类
将符合条件的元素从选择器中去除
02超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接的伪类</title>
<style>
/* 需求一:给未访问过的超链接加颜色字体 */
a:link{
color: orange;
}
/* 需求二:给访问过的超链接加字体颜色 */
a:visited{
color: green;
/* 以下样式不生效 */
font-size: 50px;
background-color: pink;
}
/* 需求三:鼠标移入,链接字体变大 */
a:hover{
font-size: 30px;
}
h1:hover{
color: yellow;
background-color: blue;
}
/* 需求四:鼠标点击后,增加背景色 */
a:active{
background-color: pink;
}
div:active{
color: red;
}
</style>
</head>
<body>
<h1>连拆非。</h1>
<a href="#">空链接1</a>
<a href="https://www.baidu/">百度</a>
<a href="https://www.jd/">京东</a>
</body>
</html>
1、‘:link’ 没有访问过的状态
2、‘:visited’ 访问过的状态
注意:1、‘:link’和‘:visited’是超链接(a标签)独有的伪类
2、由于隐私问题,‘:link’和‘:visited’只能设置颜色
3、‘:hover’ 鼠标移入的状态
4、‘:active’ 鼠标点击后的状态
03伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
/* 需求一:让文章的首字母一直为字体24px */
/* 需求二:让文章第一行添加背景颜色 */
/* 需求三:让选中的内容,添加字体颜色 */
/* 需求四:在元素开始的位置前+‘abc’ */
p::first-letter{
font-size: 30px;
}
p::first-line{
background-color: yellow;
}
p::selection{
color: red;
}
p::before{
content: "你好";
}
p::after{
content: "你也好啊";
}
</style>
</head>
<body>
<p>
youth means a temperamental predominance of courage over timidity,
of the appetite for adventure over the love of ease.
This often exists in a man of 60 more than a boy of 20.
Nobody grows old merely by a number of years. We grow old by deserting our ideals.
</p>
</body>
</html>
伪类:不存在的内容
1、‘::first-letter’ 第一个字母
2、‘::first-line’ 第一行
3、‘::selection’ 选中的内容
4、‘::before’ 在元素的最前面
要配合content使用
5、‘::after’ 在元素的最后面
要配合content使用
04继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承</title>
<style>
body{
font-size: 12px;
color: #3c3c3c;
}
p{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素的span元素
<em>我是span里面的em元素,我也可以继承</em>
</span>
</p>
<span>我是p元素外的span元素,我不会继承</span>
</p>
</body>
</html>
共同的祖先元素 统一字体的大小
样式的继承(继承祖先资产)
定义:给父元素或者祖先元素设置有关样式,它会继承到 子元素或者后代元素上
优势:一般情况下,样式的继承是对我们开发是有利的,不需要额外调整
注意:不是所有的样式都能继承,一般情况布局上样式
共同的祖先元素,设置统一的字体大小、字体颜色、行高、字体等
05选择器的权重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选择器的权重</title>
<style>
#dv{ /* id选择器 100 */
background-color: pink;
}
[id]{ /* 属性选择器 10 */
background-color: hotpink;
}
.dd.d1.d1.d3{ /* class选择器 10 */
background-color: red;
}
#dv span{ /* id选择器 100 */
color: red;
}
.dd>span{ /* class选择器 10 */
color: green;
}
div,.dd{ /* 并集选择器 内联样式比class选择器权重大,所以div生效*/
background-color: green;
}
</style>
</head>
<body>
<div id="dv" class="dd d1 d2 d3 d3 d4" > <!-- <div style="color=yellow; font-size=32px">权重最大 1000 -->
我是div元素
<span>我是div元素里的span元素</span>
<em>我是div元素里的em元素</em>
</div>
</body>
</html>
样式冲突:
给同一个元素设置同样的样式名,不一样的样式值,最终哪个样式有效果
是看选择器的权重的,谁的权重高,谁就有效果
选择器的权重
内联样式 1000
id选择器 100
class选择器/属性选择器 10
元素选择器 1
通配选择器 0
继承样式 没有权重
注意:
1、如果选择器权重一样,谁靠下,谁就生效
2、让所有选择器的权重相加,谁大谁生效
3、在并集选择器(群组选择器)当中,选择器的权重是各算个的,谁大谁生效
4、所有的选择器权重相加最高也不会超过上一级的权重,如再多的选择器相加,也不会超过id选择器
5、!important 是最高权重 但慎用
一般情况下,可以测试使用,测试是否是选择器权重的问题
如果样式设置不成功:
1、你没选中
2、选择器权重问题 !important进行测试
06display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
background-color: red;
/* 将元素转换成行内元素 */
/* display: inline; */
width: 300px; /* 设置宽度 */
height: 200px; /* 设置高度 */
}
em{
background-color: green;
/* 将元素转换成块元素 */
/* display: block */
/* 将元素转换成行内块元素 */
display: inline-block;
width: 300px;
height: 300px;
}
span{
background-color: blue;
width: 300px;
height: 300px;
}
em:hover~p{
display: block;
}
p{
/* 隐藏元素 */
display: none;
}
section{
width: 100px;
height: 100px;
background-color: yellow;
}
/* 需求一:鼠标移入section,更换背景色 */
/* 需求二:strong文字隐藏,鼠标点击section的时候,strong出现 */
section:hover{
background-color: red;
}
strong{
display: none;
}
section:active>strong{
display: block;
}
</style>
</head>
<body>
<div>
并厅上畴否的落有胆过事罪连回高于修长慧。
</div>
<span>妙起馆,自啦在人,娟憾登,其。</span>
<em>韩颜觉公一所罪吴专快是张老这。</em>
<span>文人后冈国后在下虽,什光病为。</span>
<p>的光对变之服锐贤可。</p>
<section>
<strong>人为未时身,和韩不归韩特尽同洪,都赠的。</strong>
</section>
</body>
</html>
display 实现元素之间的相互转换
可选值:
block 将元素转换成块元素
inline 将元素转换成行内元素
inline-block 将元素转换成行内块元素
none 隐藏元素
更多推荐
CSS的简单学习(2)
发布评论