前端攻城狮---css3之伪类,伪元素及其他属性

于 2018-06-12 15:10:49 发布
阅读量384 收藏
点赞数
分类专栏： 前端攻城狮 文章标签： html css3 前端 伪类 伪元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoyouhuang/article/details/80661777
版权

伪类

一说道伪类，我们可以快速想起超链接的伪类 a:link a:visited a:hover a:active,分别代表的是未点击前的样式，点击后的样式，获取焦点时的样式，点击时的样式。我们现在讲的css3的伪类可是所有标签都可以使用的，此时的link,visited,hover,active不再只针对超链接使用，其他标签也可以使用。

* :hover    能够被所有的元素使用 IE7兼容
就像div,div:hover {}
*  :focus    得到焦点时
*  :not    表示除了什么以外
p:not(.demo) 代表选择中class不是demo类的p元素

*  :only-child    唯一的儿子

p:only-child{ }表示的是p标签是孩子，并且在衣服父亲中有且只有一个孩子还是p，则显示该样式。

*  :empty     空标签

 空标签意味着里面什么都没有，哪怕是空格也不行。<div></div>   <div>  </div>前者符合，后者不符合。

*  :checked    选中的

表示被选中后的样式，比如可以给checkbox,radio等设置选中后的样式。

*  :disabled和:enabled IE9兼容       

disabled是给不能点击的标签设置样式，enabled是给能点击的标签设置样式。

伪元素

伪元素：CSS 伪元素用于向某些选择器设置特殊效果。具体要怎么去设置呢？下面我们来讲解

  1. ::before
  2. ::after 
  3. ::selection
  4. ::first-letter
  5. ::first-line

对于伪元素，我更趋向于它其实也是个元素标签，只不过是通过样式的形式去添加。

::before

首先我们要了解一下::before，它是在指定元素前显示样式，那么我们来了解一下其特性

  • 里面必填的一个属性content,就算不填也必须填写个空字符串""。
  • ::before呈现的是一个行内元素，使用要显示宽高要么设置块级元素，要么脱标。
  • 如p::befor{ }，那么将会再p前显示::before里的内容。

接下来我们上demo。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        ul{
            list-style: none;
        }
        ul li{
            position: relative;
            padding-left: 20px;
            line-height: 40px;
        }
        ul li::before{
            content:"";
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: navy;
        }
        ul li:hover::before{
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>内容内容内容内容</li>
        <li>内容内容内容内容</li>
        <li>内容内容内容内容</li>
        <li>内容内容内容内容</li>
        <li>内容内容内容内容</li>
    </ul>
</body>
</html>

这里我们把之前的伪类一起用上了。效果大家可以自行跑一下。

其实我们还可以用::before来做一些效果，下面就是做一种边框渐变的demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: relative;
            background-color: skyblue;
            overflow: hidden;
            float: left;
        }
        .box::before{
            content: "";
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
            /*过渡*/
            transition:all 0.3s ease 0s;
        }
        .box:hover::before{
            box-shadow: inset 0px 0px 20px red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

　其实中间是有渐变过度的动画效果的。

::after

首先我们要了解一下::after，它是在指定元素后显示样式，那么我们来了解一下其特性

  • 里面必填的一个属性content,就算不填也必须填写个空字符串""。
  • ::after呈现的是一个行内元素，使用要显示宽高要么设置块级元素，要么脱标。
  • 如p::after{ }，那么将会再p后显示::after里的内容。
  • IE8不兼容::after 但是兼容:after，所以我们一般用:after{} 来表示::after{}

其实我们可以通过:after来去浮动，回顾一下之前讲浮动时，去浮动的几种方法。1.给父亲设置宽高　2.给后面一个父类设置close:both(无法撑满父亲)　3.设置overflow:hidden(可以撑满父亲)　4.内墙法(可以撑满父亲)5.外墙发(不能撑满父亲)，接下来我们用:after来去浮动，直接上demo。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            border: 1px solid black;
        }
        p{
            float: left;
            width: 50px;
            height: 50px;
            background-color: orange;
            margin-right: 10px;
        }
        .cl::after{
                    width: 20px;
                    height: 20px;
                    background-color: skyblue;
                    content:"";
                    display: block;
                    clear: both;
                }  
    </style>
</head>
<body>
    <div class="cl">
        <p>1</p>
        <p>2</p>
        <p>3</p>
    </div>
    <div class="cl">
        <p>4</p>
        <p>5</p>
        <p>6</p>
    </div>
</body>
</html>
效果图就不服上了，肯定是达到去浮动的效果了。我们先来看看控制台中，样式的信息

我们可以看到在p的后面加了个::after的伪元素，其实我们就可以把它当成一个元素也行，这样的结构是不是和内墙法很像？使用::after的去浮动可以撑起父亲的，那么有些人会问clear:both，我可以理解，为什么还要加display:block?因为::after和::display　一样都是行内元素，所以需要加此属性。这么一来，我们去浮动有6种方法之多。

::selection

这个伪类表示选中文字的样式，兼容到ie9。什么叫被选中的文字的样式，看下面的图的蓝色部分就是。


::first-letter

::first-letter只能用于块级元素，该伪元素表示的是第一个文字，ie9开始兼容，可以利用它去做文字环绕效果。

::first-line

::first-line只能用于块级元素，该伪元素表示的是第一行文字，ie9开始兼容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 选择p里面文字时 样式生效*/
        p::selection{
            background-color: orange;
            color:white;
        }
        p::first-letter{
            font-weight: bold;
            font-size: 50px;
            float: left;
        }
        p::first-line{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

接下来我们来学习一些css3的一些属性

border-radius

border-radius是用来设置弧度的。

border-radius:20px 30px 40px 50px;表示左上20px右上30px右下40px左下50px

border-radius:20px 30px 40px;表示左上20px右上30px右下40px左下30px

border-radius:20px 30px;表示左上20px右上30px右下20px左下30px

border-radius:20px;表示左上20px右上20px右下20px左下20px

还有一种就是单个设置如:

border-top-left-radius: 50px 80%;

其实使可以设置两个值的，第一个表示水平半径，第二个表示垂直半径,%表示宽高的百分比，若是水平半径则是宽的百分比，垂直半径则是高的百分比。

box-shadow

box-shadow表示盒子的阴影。参数如下

box-shadow: 6px 6px 10px 10px red inset;  

分别表示右偏移　下偏移　模糊半径　延时长度　颜色　内阴影还是外阴影。

text-shadow

text-shadow表示文字阴影。具体参数如下

text-shadow:6px 6px 10px red;

分别表示右阴影　下阴影　模糊半径　颜色。

background其他属性

渐变色

我们要如何通过background来设置渐变色？我们可以通过linear-gradient()值去设置。

首先我们需要通过background-image的属性去设置背景色，我们先来看看如何去设置

线性渐变

background-image: -webkit-linear-gradient(left,red,blue); -webkit-
background-image: -moz-linear-gradient(top,red,blue); -moz-
background-image: -o-linear-gradient(top,red,blue); -o-
background-image: -ms-linear-gradient(top,red,blue); -ms-
background-image: linear-gradient(top,red,blue);

我们来了解一下webkit moz o ms　这些前缀是干什么用？其实这些前缀代表的是去兼容对应浏览器，-webkit-谷歌浏览器　-moz-火狐浏览器　-o-opera浏览器　-ms-IE浏览器

就以background-image:-webkit-linear-gradient(top,red,blue)为例，渐变的方向从上到下，渐变的颜色是红到蓝，可以理解为第一个参数表示的是渐变的方向，后面的呢是渐变的颜色。

-webkit-linear-gradient(top left,red,blue);表示左上到右下的渐变，

-webkit-linear-gradient(45deg,red,blue);当然可以设置角度，deg表示角度，左边默认为0°，逆时针。

-webkit-linear-gradient(top,red,blue 30%,green 70%);后面的渐变色还可以通过百分比。因为这里渐变的是上到下，渐变色可以分为一下几个阶段，0-30%的高度渐变是红到蓝，30%-70%是蓝渐变到绿色,70%-100%那么都是绿色了。

径向渐变

radial-gradient()，同样前面也有四种前缀去适配不同的浏览器。参数也同线性渐变一样

background-image: -webkit-radial-gradient(100px 100px , blue , white );前面的100px 100px表示的是径向渐变的圆心的位置，当然我们也可以用top left 等。第一个参数主要就是设置圆心的位置。

我们就可以通过渐变去实现一些颜色效果，在开发上就不需要切图了 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		nav{
			width: 1000px;
			height: 40px;
			margin: 50px auto;
			background-image:-webkit-linear-gradient(top,#0fa3df,#1ce5fa 20%,#39a7e7);
		}
		nav ul{
			list-style: none;
		}
		nav ul li{
			float: left;
			width: 100px;
			height: 40px;
			text-align: center;
			line-height: 40px;
			color:white;
		}
		nav ul li:hover{
			 background-image:-webkit-linear-gradient(top,orange,gold 20%,yellow);
		}
	</style>
</head>
<body>
	<nav>
		<ul>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
			<li>网站栏目</li>
		</ul>
	</nav>
</body>
</html>


background-clip

background-clip:规定背景的绘制区域也可以理解为裁剪的区域　一共有三个值 content-box/padding-box/border-box


border-box表示从边框开始裁剪(包含border padding content)　 padding-box表示从内边距开始裁剪(不包含border 包含padding content) content-box表示从内容开始裁剪(不包含border padding 包含content)

background-origin

background-origin 规定背景图片的定位区域也可以理解为从哪里开始显示图片。一共有三个值 content-box/padding-box/border-box


＊＊＊＊＊＊＊＊

其实显示的效果和background-clip一样，但是真的一样吗？我们将背景换上一张图片来看看


第一张是background-orgin 第二张是background-clip首先图片的大小一定是大于整个盒子的，不然无法看出差异。

从这两张效果图我们可以更好的理解，orgin就是显示的位置，指定一个显示图片的起点。clip表示了图片显示的范围，回去裁剪调超出范围那部分的背景。

注意:background: red content-box ;=(background-clip:content-box;+background-orgin:content-box)

background-size

background-size　表示设置背景图片的大小。下面我们来看看几种设置方式。

background-size:200px 300px; 表示给背景图片设置死的高度，可能会出现图片失真

background-size:auto 100px;　给图片的高度设置死，宽度根据图片自身的比例再结合给定的高度去计算，并显示。

background-size:100px auto;　给图片的宽度设置死，高度根据图片自身的比例再接合给定的高度去计算，并显示。

background-size:cover;　把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

background-size:contain;　把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

下面直接上代码和效果图，清晰明了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div:nth-child(1){
			border: 1px solid #000;
			width: 200px;
			height: 200px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: 200px 200px;
		}
		div:nth-child(2){
			border: 1px solid #000;
			width: 200px;
			height: 200px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: 200px auto;
		}
		div:nth-child(3){
			border: 1px solid #000;
			width: 200px;
			height: 200px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: auto 200px;
		}
		div:nth-child(4){
			border: 1px solid #000;
			width: 200px;
			height: 100px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: cover;
		}
		div:nth-child(5){
			border: 1px solid #000;
			width: 200px;
			height: 400px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: cover;
		}

		div:nth-child(6){
			border: 1px solid #000;
			width: 200px;
			height: 400px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: contain;
		}
		div:nth-child(7){
			border: 1px solid #000;
			width: 200px;
			height: 100px;
			background: url(images/weide.jpeg) no-repeat;
			background-size: contain;
		}
 
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

１．２．３．

４．５．６．


７．

多背景色

background: url(images/icons.png) repeat-y,url(images/weide.jpeg) no-repeat;
background-size: auto auto,600px 100px;

就这么组合的使用即可。



伪类等相关知识点已经讲完，接下来会来讲css3的过渡动画相关知识点，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。


csdn_gyh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值