`

第36章 CSS3中新增的属性选择器

 
阅读更多
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
[id*=section1]{ background:#0C0;}
[id*=section2]{ background:#9C0;}
[id*=section1-1]{ background:#CF0;}
*/
[id*=section]{ background:#F03;}
[id^=s]{ background:#0Fd;}
[id^=b]{ background:#00C;}
[id*=n]{ background:#0F0;}
[id$=c]{ background:#009;}
[id$=\-1]{ background:#FF0;}
[id$=_2]{ background:#F03;}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">section1a</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_3">section2-3</div>
</body>
</html>

 效果图:

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[href$=php]:after{
	content:"[网站链接]";
	color:#9F3;
}
a[href$=png]:after{
	content:"[图片链接]";
	color:#3F6;	
}
</style>
</head>
<body>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
</body>
</html>

效果图:

 

 

  • 大小: 45.6 KB
  • 大小: 43.5 KB
  • 36.rar (727 Bytes)
  • 下载次数: 0
分享到:
评论

相关推荐

    HTML5 and CSS3 for the Real World

    - **CSS3概述**:第六章对CSS3进行了全面介绍,覆盖了选择器、单位、颜色值等方面的新特性。 - **渐变背景与多重背景**:第七章详细讲解了如何利用CSS3的`linear-gradient()`和`repeating-linear-gradient()`函数来...

    WEB前端开发初级教案.pdf

    1. CSS3新增选择器:讲解了CSS3引入的新选择器,如属性选择器、否定伪类等。 2. CSS3新增属性:介绍了一些新的CSS属性,比如边框圆角、阴影、渐变、文字阴影等。 3. 新增变形动画属性:阐述了CSS3变形属性,包括旋转...

    CSS3_参考手册

    在CSS3中,新增了许多功能强大的属性,包括但不限于边框效果、背景图像处理、文本阴影、用户界面定制等,极大地丰富了网页的表现力。 #### 二、边框属性(Borders) ##### 1. `border-color` - **定义与用法**:`...

    HTML5+CSS3(容易).pdf

    CSS3还引入了新的选择器,如类选择器(`.class`)、ID选择器(`#id`)和伪类选择器(`:hover`, `:active`, `:focus`等),这些增强了样式规则的灵活性和精准性。在定义列表`&lt;dl&gt;`中,`&lt;dt&gt;`用于定义名词,`&lt;dd&gt;`则...

    前端大厂最新面试题-css.docx

    54. CSS中的类选择器和ID选择器的区别是,类选择器可以应用于多个元素,而ID选择器只能应用于一个元素。 55. 伪元素::before和:before的区别是,::before是CSS3中的新语法,而:before是CSS2中的老语法。 56. 伪类:...

    HTML5 The Definitive Guide to HTML5

    - **第18章:使用CSS选择器(第二部分)**:继续深入探讨CSS选择器的高级用法,包括属性选择器、伪类等。 - **第19章:使用边框和背景**:详细讲解如何使用CSS3来定制边框效果和背景图案。 - **第20章:操作盒模型**...

    html5网页前端设计课后习题答案.docx

    常用的 CSS 选择器有元素选择器、id 选择器、类选择器和属性选择器等。 十三、CSS 的注释语句 CSS 的注释以“/*”开头,以“*/”结尾,支持单行和多行注释。 十四、CSS 颜色值的表达方式 CSS 颜色值有多种表达...

    灰色宽屏三栏简洁的博客html5模板4424_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.zip

    CSS3提供了许多新的选择器和模块,如媒体查询(Media Queries)就是实现响应式设计的关键,它允许开发者定义不同屏幕尺寸下的样式规则,从而实现跨设备的兼容性。此外,CSS3还带来了过渡(Transitions)、动画...

    ASP.NET2.0高级编程(第4版)1/6

    第3章 应用程序和页面框架39 3.1 应用程序的位置选项39 3.1.1 内置的Web服务器39 3.1.2 IIS40 3.1.3 FTP41 3.1.4 Web站点需要  FrontPage Extensions42 3.2 ASP.NET页面结构选项43 3.2.1 内置编码44 3.2.2 新的后台...

    2.ASP.NET.2.0.高级编程(第4版) [1/7]

    第3章 应用程序和页面框架 39 3.1 应用程序的位置选项 39 3.1.1 内置的Web服务器 39 3.1.2 IIS 40 3.1.3 FTP 41 3.1.4 Web站点需要FrontPage Extensions 42 3.2 ASP.NET页面结构选项 43 3.2.1 内置编码 44 ...

    面试题总结.docx

    ### 三十六、Redux简介 Redux是一种用于管理应用状态的JavaScript库。它通过单一的数据源、纯函数和中间件等机制,帮助开发者更容易地管理复杂的应用状态。 ### 三十七、CSS技巧 使用CSS可以实现各种有趣的视觉...

    HTML 初学者指南第二版(PDF).rar

    通过使用选择器选择HTML元素并应用样式规则,你可以改变字体、颜色、大小、布局等。CSS可以内联、内部或外部引入。 十、响应式设计 随着移动设备的普及,响应式设计成为必须。HTML5和CSS3提供了一些工具,如媒体...

Global site tag (gtag.js) - Google Analytics