<!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>
效果图：
相关推荐
- **CSS3概述**：第六章对CSS3进行了全面介绍，覆盖了选择器、单位、颜色值等方面的新特性。 - **渐变背景与多重背景**：第七章详细讲解了如何利用CSS3的`linear-gradient()`和`repeating-linear-gradient()`函数来...
1. CSS3新增选择器：讲解了CSS3引入的新选择器，如属性选择器、否定伪类等。 2. CSS3新增属性：介绍了一些新的CSS属性，比如边框圆角、阴影、渐变、文字阴影等。 3. 新增变形动画属性：阐述了CSS3变形属性，包括旋转...
在CSS3中，新增了许多功能强大的属性，包括但不限于边框效果、背景图像处理、文本阴影、用户界面定制等，极大地丰富了网页的表现力。 #### 二、边框属性（Borders） ##### 1. `border-color` - **定义与用法**：`...
CSS3还引入了新的选择器，如类选择器（`.class`）、ID选择器（`#id`）和伪类选择器（`:hover`, `:active`, `:focus`等），这些增强了样式规则的灵活性和精准性。在定义列表`<dl>`中，`<dt>`用于定义名词，`<dd>`则...
54. CSS中的类选择器和ID选择器的区别是，类选择器可以应用于多个元素，而ID选择器只能应用于一个元素。 55. 伪元素::before和:before的区别是，::before是CSS3中的新语法，而:before是CSS2中的老语法。 56. 伪类:...
- **第18章：使用CSS选择器（第二部分）**：继续深入探讨CSS选择器的高级用法，包括属性选择器、伪类等。 - **第19章：使用边框和背景**：详细讲解如何使用CSS3来定制边框效果和背景图案。 - **第20章：操作盒模型**...
常用的 CSS 选择器有元素选择器、id 选择器、类选择器和属性选择器等。 十三、CSS 的注释语句 CSS 的注释以“/*”开头，以“*/”结尾，支持单行和多行注释。 十四、CSS 颜色值的表达方式 CSS 颜色值有多种表达...
CSS3提供了许多新的选择器和模块，如媒体查询（Media Queries）就是实现响应式设计的关键，它允许开发者定义不同屏幕尺寸下的样式规则，从而实现跨设备的兼容性。此外，CSS3还带来了过渡（Transitions）、动画...
第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 新的后台...
第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 ...
- **querySelector**：CSS选择器语法获取元素。 - **querySelectorAll**：获取多个元素。 **第三节：范例** ```javascript let heading = document.getElementById("main-heading"); heading.style.color = "red";...
### 三十六、Redux简介 Redux是一种用于管理应用状态的JavaScript库。它通过单一的数据源、纯函数和中间件等机制，帮助开发者更容易地管理复杂的应用状态。 ### 三十七、CSS技巧 使用CSS可以实现各种有趣的视觉...
通过使用选择器选择HTML元素并应用样式规则，你可以改变字体、颜色、大小、布局等。CSS可以内联、内部或外部引入。 十、响应式设计 随着移动设备的普及，响应式设计成为必须。HTML5和CSS3提供了一些工具，如媒体...