CSS3的[att=val]选择器

1、实例源码

<!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=utf-8" />
<title>CSS3的[att=val]选择器</title>
<style type="text/css">
   [id=div_border]{
	   background-color:#C00;
	   width:110px;
	   font-family:微软雅黑;
	   font-size:18px;
	   font-size-adjust:!important;
	   font-stretch:expanded;
	   font-style:oblique;
	   font-variant:inherit;
	   font-weight:bolder;
   }
</style>
</head>

<body>
   <div id="div_border">
   	   <ol>
         <li>星期一</li>
         <li>星期二</li>
         <li>星期三</li>
         <li>星期四</li>
         <li>星期五</li>
         <li>星期六</li>
         <li>星期日</li>
       </ol>
   </div>
</body>
</html>

2、实例结果

3、说明

[att=val]，att代表属性，val代表属性值

时间： 2024-11-06 20:10:45

CSS3的[att=val]选择器的相关文章

css3新增的属性选择器

使用css选择器,可以实现一个样式对应多个html文档的元素,在{}前面的部分就是"选择器",指明了样式的作用对象. 在CSS中追加了三个属性选择器:[att*=val].[att^=val]和[att$=val] id="top" att就是id,类似的如class,href~~等属性. [att*=val]属性选择器如果元素att属性的属性值中包含val指定的字符,那么该元素使用这个样式.[att^=val]属性选择器如果att属性的属性值的开头字符为用va

css3中的属性选择器

1.[att*=val]属性选择器该选择器的含义是如果属性att中包含了val值,则该元素可以使用这个样式.如:[id*=content]中,这个样式在页面元素中id包含content字符串的可以使用. 2.[att^=val]属性选择器该选择器的含义是如果属性att中的值以val开始,则可以使用这个样式.如:[id^=con]选择器,这个样式在页面元素中id是以con字符串开头的可以使用. 3.[att$=val]属性选择器该选器的含义是如果属性att中的值以val结束,则可以使用这个样式.如

CSS3 结构性伪类选择器（2）

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

Atitit.隔行换色  变色 css3 结构性伪类选择器

Atitit.隔行换色变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS3 结构伪类选择器详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素但不是P类型,不是红色</h1> < p>这是黑色的注意对比

css3新增加的选择器

css3新增加的选择器一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的二.结构性伪类选择器: E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even

CSS3介绍以及新增选择器

一:基本介绍 1:css版本 css1: 定义了网页的基本属性:字体,颜色,补白,基本选择器等等. css2:添加了高级功能:浮动,定位,高级选择器(子选择器,相邻选择器,通用选择器) css3:遵循模块化开发.发布时间并不是一个时间点,而是时间段.(2002-至今) 2:css3新特性 (1)CSS选择器 (2)新的颜色制式和透明设定 (3)多栏布局的实现 (4)多背景图效果 (5)文字阴影效果 (6)开放的网络字体类型 (7)圆角 (8)边框背景图片 (9)盒子阴影 (10)媒体查询二:新

CSS3 选择器之基本选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点. CSS3的常用选择器有: 下面举几个例子来说明选择器的实用方法: 1.创建如下的DOM结构: <div class="demo"> <ul class="clearfix"> <li

站在CSS3的肩上定义选择器

按上下文选择元素按祖先元素选择要格式化的元素输入ancestor,这里的ancestor是希望格式化的元素的祖先元素的选择器. 输入一个空格(必不可少). 如果需要,对后续的每个祖先元素重复第(1)和 (2)步. 输入descendant,这里的descendant是要格式化的元素的选择器. 按父元素选择要格式化的元素输入parent,这里的parent是包含直接格式化的元素的选择器. 输入>(大于号). 如果需要,对后代每个父元素重复第(1)步和第(2)步. 输入child,这里的chi