css3新的功能

原创

mb64390262217c2 2023-04-14 19:59:24 博主文章分类：css3 ©著作权

文章标签 html css 属性选择器 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mb64390262217c2的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.属性选择器

[id=articel]{
     color:red;
}

[id*=articel]{
     color:red;
}


[id^=articel]{
     color:red;
}


[id$=articel]{
     color:red;
}

2.伪类选择器

:first-child选择某个元素的第一个子元素；

:last-child选择某个元素的最后一个子元素；
:nth-child()选择某个元素的一个或多个特定的子元素；
:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
:nth-of-type()选择指定的元素；
:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
:first-of-type选择一个上级元素下的第一个同类子元素；
:last-of-type选择一个上级元素的最后一个同类子元素；
:only-child选择的元素是它的父元素的唯一一个了元素；
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
:empty选择的元素里面没有任何内容。
:before和:after，在元素前边和后边添加内容

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>css3样式</title>
	<style type="text/css">
		p:before{
			content:'前面的文字'
		}
		
		p:after{
			content:"后面的内容"
		}

	</style>
<head>
<body>
<p>p的内容</p>
</body>
</html>

box-shadow元素阴影

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}