5.css伪类及伪元素的常用使用方法
2020-02-17 本文已影响0人
欣博客
1.a标签超链接伪类选择器
伪类专门用来表示元素的一种的特殊的状态
比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* 为没访问过的链接设置一个颜色为绿色
* :link
* - 表示普通的链接（没访问过的链接）
*/
a:link{
color: yellowgreen;
}
/*
* 为访问过的链接设置一个颜色为红色
* :visited
* - 表示访问过的链接
*
* 浏览器是通过历史记录来判断一个链接是否访问过,
* 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
*
*/
a:visited{
color: red;
}
/*
* :hover伪类表示鼠标移入的状态
*/
a:hover{
color: skyblue;
}
/*
* :active表示的是超链接被点击的状态
*/
a:active{
color: black;
}
/*
* :hover和:active也可以为其他元素设置
* IE6中，不支持对超链接以外的元素设置:hover和:active
*/
p:hover{
background-color: yellow;
}
p:active{
background-color: orange;
}
/*
* 文本框获取焦点以后，修改背景颜色为黄色
*/
input:focus{
background-color: yellow;
}
/**
* 为p标签中选中的内容使用样式
* 可以使用::selection为类
* 注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
*/
/**
* 兼容火狐的
*/
p::-moz-selection{
background-color: orange;
}
/**
* 兼容大部分浏览器的
*/
p::selection{
background-color: orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a href="http://www.baidu123456.com">没访问过的链接</a>
<p>我是一个段落</p>
<!-- 使用input可以创建一个文本输入框 -->
<input type="text" />
</body>
</html>
2.伪元素
使用伪元素来表示元素中的一些特殊的位置
为p中第一个字符来设置一个特殊的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:first-letter {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。
</p>
</body>
</html>
预览效果:
image.png
为p中的第一行设置一个背景颜色为黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:first-line {
background-color: yellow;
}
</style>
</head>
<body>
<p>
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。
</p>
</body>
</html>
image.png
:before和:after
:before表示元素最前边的部分
:after表示元素的最后边的部分
一般before都需要结合content这个样式一起使用
通过content可以向before或after的位置添加一些内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:before{
content: "我会出现在整个段落的最前边";
color: red;
}
p:after{
content: "我会出现在整个段落的最后边";
color: orange;
}
</style>
</head>
<body>
<p>
枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们，别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼䀹眼；直刺着天空中圆满的月亮，使月亮窘得发白。 鬼䀹眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地䀹着许多蛊惑的眼睛。 哇的一声，夜游的恶鸟飞过了。 我忽而听到夜半的笑声，吃吃地，似乎不愿意惊动睡着的人，然而四围的空气都应和着笑。
</p>
</body>
</html>
image.png
3.子元素的伪类
设置第一个子元素和最后一个子元素 :first-child 和:last-child
:first-child 可以选中第一个子元素
:last-child 可以选中最后一个子元素
为第一个p标签设置一个背景颜色为黄色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/* 必须第一个子元素是p标签,否则失效*/
body > p:first-child{
background-color: yellow;
}
/* 必须最后一个子元素是p标签 否则失效*/
p:last-child{
background-color: yellow;
}
</style>
</head>
<body>
<!-- <span>我是span</span> -->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<!-- <span>hello</span> -->
<div>
<!-- <span>ffff</span> -->
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<!-- <span>sssss</span> -->
</div>
</body>
</html>
预览效果:
image.png
nth-child 可以选中任意位置的子元素
该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* :nth-child 可以选中任意位置的子元素
* 该选择器后边可以指定一个参数，指定要选中第几个子元素
* even 表示偶数位置的子元素
* odd 表示奇数位置的子元素
*
*/
p:nth-child(odd){
background-color: yellow;
}
p:nth-child(even){
background-color: blue;
}
</style>
</head>
<body>
<!-- <span>我是span</span> -->
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<!-- <span>hello</span> -->
<div>
<!-- <span>ffff</span> -->
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<!-- <span>sssss</span> -->
</div>
</body>
</html>
预览效果:
image.png
:first-of-type :last-of-type :nth-of-type
和:first-child这些非常的类似，只不过child，是在所有的子元素中排列
而type，是在当前类型的子元素中排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* :first-of-type
* :last-of-type
* :nth-of-type
* 和:first-child这些非常的类似，
* 只不过child，是在所有的子元素中排列
* 而type，是在当前类型的子元素中排列
*/
p:first-of-type{
background-color: yellow;
}
p:last-of-type{
background-color: yellow;
}
</style>
</head>
<body>
<span>我是span</span>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>hello</span>
<div>
<span>ffff</span>
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<p>我是DIV中的p标签</p>
<span>sssss</span>
</div>
</body>
</html>
预览效果:
image.png
否定伪类
可以从已选中的元素中剔除出某些元素
用法：:not(选择器)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p:not(.hello){
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p class="hello">我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
image.png
