CSS3让div自动收缩及属性选择器

原创 2013年12月06日 09:06:50

定义div大小后,当里面的内容超过的div的大小,css2中内容后溢出来,在css3中div可以随着内容的大小改变而改变。 实例的图片用css3不能显示,原因未知! 但把文档类型由“XHTML 1.0 Transitional”改为web页面也就是“XHTML Mobile 1.0”后在谷歌浏览器中能显示,用手机访问也不能显示图片。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#image_css3{
width:450px;
padding-top:20px;
padding-left:14px;
border-image:url(test3.png) 3 stretch stretch;
-moz-border-image:url(test3.png) 3 stretch stretch;
}

#image_css2{
margin:3px;
width:450px;
height:104px;
padding-left:14px;
padding-top:20px;
background:url(test3.png);
background-repeat:no-repeat;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="image_css3">
	.css3示例1<br/>
	.经测试在IE、火狐和谷歌浏览器中背景图片不能显示<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
</div>

<div id="image_css2">
	.css2示例1<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
	.示例2<br/>
	.示例3<br/>
	.示例4<br/>
	.示例5<br/>
</div>


</body>
</html>
效果图:

css3属性选择器,让我们能像使用正则表达式一样判断该改变哪个元素的属性,具体内容见代码。经过测试主流浏览器都能支持。

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.divcss2{background:yellow}
</style>

<style type="text/css">
[id="3"]{background-color: #0000FF}
</style>
<style type="text/css">
[id*="4"]{background-color:#CCFFFF}
</style>
<style type="text/css">
[id^="5"]{background-color:#00FFFF}
</style>
<style type="text/css">
[id$="6"]{background-color:#CCCCCC}
</style>
<style type="text/css">
a[href="use"]:after{
	content:"可以方便的根据不同需要改变css";
	color:#00FF66;
}
</style>
</head>

<body>
<div id="1" class="divcss2">div1 用css2来改变背景颜色</div>
<div id="2">div2</div>
<div id="3">div3 用css3的选择器来改变背景颜色</div>
<div id="4">div4 用[att*=val]的方式改变颜色---<font color="red">只要包含value就改变</font></div>
<div id="4_ss">div4 用[att*=val]的方式改变颜色</div>
<div id="ss_4ss">div4 用[att*=val]的方式改变颜色</div>
<div id="s47k">div4 用[att*=val]的方式改变颜色</div>
<div id="5">div5 用[att^=val]的方式改变颜色----<font color="red">以val开头</font></div>
<div id="5_xxoo">div5 用[att^=val]的方式改变颜色</div>
<div id="xxoo_5">div5 用[att^=val]的方式改变颜色</div>
<div id="5dd">div5 用[att^=val]的方式改变颜色</div>
<div id="dd5">div5 用[att^=val]的方式改变颜色</div>
<div id="6">div6 用[att$=val]的方式改变颜色----<font color="red">以val结尾</font></div>
<div id="xxo6o">div6 用[att$=val]的方式改变颜色</div>
<div id="xxoo_6">div5 用[att$=val]的方式改变颜色</div>
<div id="6dd">div5 用[att$=val]的方式改变颜色</div></br></br>
<a href="use">作用</a>
</body>
</html>
运行效果:




相关文章推荐

CSS3属性选择器详解

一、属性选择器 在CSS3中,追加了三个属性选择器分别为:[att*=val]、[att^=val]、[att$=val] 01.[att*=val] 说明:匹配具有attr属性、且值中含有va...

css3中属性选择器的使用

本篇简要介绍一下css3中属性选择器的使用,例。 CSS3中属性选择器的使用 /*[id*= section1]{ */ /*back...

CSS3属性选择器

1、基本介绍 (1)[att*=val]属性选择器 如果元素用att表示的属性的属性值中包含用val指定的字符,则该元素使用这个样式 (2)[att^=val]属性选择器 ...

CSS3新增属性选择器: [attribute*=value] 、[attribute^=value] 和[attribute$=value]

在CSS3中新增了 [attribute*=value] 、[attribute^=value] 和[attribute$=value] 三个选择器,使得属性选择器有了通配符的概念。...

CSS3 选择器——属性选择器

CSS3的属性选择器主要包括以下几种:  E[attr]:只使用属性名,但没有确定任何属性值;  E[attr="value"]:指定属性名,并指定了该属性的属性值;  E[attr~="valu...

CSS3 选择器—属性选择器

CSS3 选择器—属性选择器属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个...

CSS3 选择器——属性选择器

上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了,其主要作用就是对带有指...

CSS3选择器——属性选择器

CSS选择器——属性选择器

css3选择器--基本选择器,层次选择器,属性选择器

在大篇CSS代码中,并没有说明什么样式服务于什么元素,只是在元素中使用了class属性。而class属性本身没有语义,它纯粹是用来为CSS服务的,属于多余属性,并没把样式和元素绑定起来,一个CSS类选...
  • Ljs_cn
  • Ljs_cn
  • 2016年12月05日 23:35
  • 1248

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)

CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS3让div自动收缩及属性选择器
举报原因:
原因补充:

(最多只允许输入30个字)