写了这么长时间前端代码竟然对CSS3选择器还不是很清楚，呜呼哀哉！
俗话说：书读百遍，其义自见，我信这句话，所有我要多看书，多作笔记，多记录学过的东西，不然学了跟没学没什么分别。【本文会根据学习会新增内容，不正确的地方请大家指正，谢谢！】
一、CSS3属性选择器
在CSS3中增加了三个属性选择器
- [att*=val]：如果元素用att表示的属性之属性值包含字符为val指定的字符串的话，则该元素使用该样式。
- [att^=val]：如果元素用att表示的属性之属性值的开头字符为val指定的字符串的话，则该元素使用该样式。
- [att$=val]：如果元素用att表示的属性之属性值的结尾字符为val指定的字符串的话，则该元素使用该样式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3选择器</title>
<style type="text/css">
._divYellow{ background:yellow}
[id^=section]{
background:red
}
[id$=\-1]{
background:yellow
}
</style>
</head>
<body>
<div id="section1" class="divYellow">示例文本1</div>
<div id="subsection1-1">示例文本1-1</div>
<div id="subsection1-2">示例文本1-2</div>
<div id="section2">示例文本2</div>
<div id="subsection2-1">示例文本2-1</div>
<div id="subsection2-2">示例文本2-2</div>
</body>
</html>
看上面代码：
[id^=section]表示id以section开头，[id$=\-1]表示id以-1结束那样式就会满足该条件的所有标签器作用。
二、结构性伪类选择器
1、伪类选择器及伪元素选择器
所谓伪类选择器就是相同元素，定义不同的类选择器，且选择器名已定义好，如a（锚）元素的几种选择器。
所谓伪元素选择器：并不是针对真正的元素使用选择器，而是针对CSS中一定义好的伪元素使用的选择器。
在CSS中有如下四种为元素选择器：
- first-line：元素的第一行
- first-letter：元素的中文第一个汉字或英文的第一个字母
- before：元素前面插入内容
- after：元素后面插入内容
接上面例子：
......
p:first-line{
color:#0000ff
}
......
<p>
段落中的第一行。<br>段落中的第二行。
</p>
......
运行代码样式对p标签第一个元素起作用。
。。。。。。
相关推荐
在IT领域，尤其是在前端开发中，CSS3是现代网页设计不可或缺的一部分，它引入了许多新的选择器，极大地增强了样式表的功能和灵活性。然而，早期版本的Internet Explorer（IE）浏览器，尤其是IE8及以下版本，对CSS3...
CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...
《使用ie-css3.js让IE浏览器支持CSS3高级选择器》 在现代Web开发中，CSS3已经成为构建精美网页和复杂交互的必备工具，其中高级选择器提供了更强大的样式控制能力。然而，早期版本的Internet Explorer（IE6、IE7、IE...
ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到，它就会被替换为同名的CSS class。比如： div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后，Robert Nyman的...
下面是前端开发中经常使用的 30 个 CSS3 选择器，包括通用元素选择器、ID 选择器、类选择器、标签选择器、伪类选择器、毗邻元素选择器、子元素选择器、属性选择器等。 1. 通用元素选择器 * 通用元素选择器*是选择...
然后两个选择器相对应的CSS代码如下： p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中，这两个选择器所实现的效果是一致的，第二个p标签的文字变成了红色： 尽管上面两个demo...
- **cssQuery**：由Dean Edwards开发的JavaScript库，全面支持CSS选择器，包括CSS3，提供了独立的CSS1、CSS2、CSS3和全集版本。通过cssQuery，可以在IE中动态添加样式名以模拟CSS3选择器的效果。 示例代码： ```...
标题"让ie兼容css选择器"指的是通过引入外部JavaScript文件，如ie7.js、ie8.js和ie9.js，来增强这些旧版IE浏览器对CSS选择器的支持，使它们能够理解和应用更先进的CSS规则。这些JavaScript库通常会模拟缺失的功能，...
CSS3参考手册(css3语法使用查询手册)CHM版，可快速索引和搜索CSS3各种属性值以及具体的用法，说详细介绍有CSS3选择器的各方面知识，这包括UI元素状态伪类 E:checked、结构性伪类 E:nth-of-type(n)、子串匹配的属性...
1. **CSS3选择器**：为了选中并独立控制每个色块，我们可以使用类选择器或者数据属性选择器，确保每个元素都有独特的样式。 2. **CSS3变换（Transform）**：通过`transform`属性，我们可以让色块在垂直方向上移动。...
要让这些浏览器理解CSS3的伪类（如:hover, :nth-child()）、属性选择器（如[E~=F]）和其他更复杂的选择器，可以使用Selectivizr库。Selectivizr会解析CSS3选择器，并将它们转化为IE8及以下版本可理解的JavaScript...
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
在React开发中，CSS选择器是用于特定于组件的样式化的一种强大工具。React组件的样式管理是一个关键的方面，因为它影响着应用的可维护性和性能。本篇将深入探讨React组件与CSS选择器的结合使用，以及如何优化组件的...
另外，CSS3的Flexbox或Grid布局可以方便地实现选择器的响应式设计，使其在不同屏幕尺寸上都能正常显示。 JQuery库在这当中起到了辅助作用，它简化了JavaScript的DOM操作，使得事件处理、元素操作和动画效果的实现...
2. **编译CSS选择器**：使用CSS选择器编译器，如`selector.Selector`，将CSS选择器字符串编译成可执行的Go代码。这一步骤将CSS字符串转换为内部表示，以便于后续的匹配操作。 3. **应用选择器**：编译后的选择器...
CSS 基本选择器 本资源摘要信息将着重介绍 CSS 基本选择器的概念、语法和应用，旨在帮助学习者快速掌握 CSS 基本选择器的使用和应用。 一、CSS 概念和语法 CSS 全称为 Cascading Style Sheet，即层叠样式表。它的...
在这篇关于"CSS基础选择器"的讲解中，我们将深入理解CSS选择器的概念以及如何使用它们来定位并应用样式到HTML元素。 **CSS选择器**是CSS中的基本概念，它们是用于选取HTML文档中特定元素的工具。选择器使得我们可以...