前面已经介绍过CSS伪类的知识，具体可见前文 CSS伪类知识详解。
伪元素常常被误解为伪类，主要在于他们的语法相似，都是对于选择器功能的扩展，相似程度很高导致被混淆。
本文通过详细介绍伪元素和常见的使用方法，最后也会分析下伪元素与伪类的基本区别。
CSS伪元素也是应用于选择器的关键字，允许改变被选择元素的特定部分的样式。
一般常见的如用于在元素的内容前后插入新的内容，或者改变首字母、首行的样式等。
语法：selector:pseudo-element { property: value; }。
div::before {
content: '开始-';
color: red;
font-size: 15px;
}
如上代码，即是我们常用的 ::after 伪元素，在div内部增加一块 开始- 的内容作为div的第一个子元素，可以设置不同的样式属性。
下面的列表，列出当前可用的伪元素：
| 伪元素 | 描述 |
|---|---|
| ::after | 作为选中元素的第一个子元素。 |
| ::before | 作为选中元素的最后一个子元素。 |
| ::first-letter | 选中块元素第一行的第一个字母，应用样式。 |
| ::first-line | 选中块元素的第一行，应用样式。 |
| ::selection | 应用于文档中被用户选中的部分，如使用鼠标选中文本。 |
| ::file-selector-button | 代表input(file)标签按钮，用来改变该按钮样式。 |
| ::marker | 应用于list-item元素上的标记点的样式。 |
| ::slotted | 用于选定那些被放在HTML模板中的元素。 |
| ::part | 应用于Web components中shadow-dom的任何匹配part属性的元素。 |
其中，::before 和 ::after 应该是我们使用最多的伪元素，而其他的伪元素也有各自的特点和作用，下面通过一个示例来展示其中几个伪元素。
示例：
<div class="province">
<span>中国中部的省份</span>
<ul>
<li>湖北</li>
<li>湖南</li>
</ul>
<input type="file" />
</div>
.province::first-letter {
color: #f00;
font-size: 20px;
}
.province::before {
content: '选择'
}
::selection {
background-color: #ff0;
}
li::marker {
color: #f00;
}
input::file-selector-button {
border: 1px solid #f00;
font-size: 20px;
border-radius: 5px;
}
页面呈现，如下图：
以上代码，使用了多个伪元素的实现：
选择。::before 元素的文本，因为 ::before 是第一行子元素的内容。注意：before伪元素作为第一个子元素，会被first-letter选中赋予样式。
以后当我们想美化文件上传控件时，伪元素::file-selector-button也是一个可用的选择。
这两个伪元素是我们前端开发中最常用的，本节专门详述它们的基本用法。
::before 创建一个伪元素，作为所选中元素的第一个子元素；::after 创建一个伪元素，作为所选中元素的最后一个子元素。
它俩通常展示一块文本内容，并且需要使用 content 属性来为元素添加内容，默认为行内元素。
一般都是用于在元素内部的首尾插入一段内容，文字或者小图标等等。
注意：不能应用于替换元素，如img、br等元素。
content属性主要用于在 ::before 和 ::after 两个伪元素中插入内容。
它的取值范围：
<div class="wrap">
<label>请选择您所在的城市</label>
</div>
.wrap::before {
content: '开始-';
color: #f00;
}
.wrap::after {
content: url(./home.png);
}
label::before{
content: open-quote;
color: #f00;
}
label::after{
content: close-quote;
color: #f00;
}
页面呈现，如下图：
以上代码，
在 div.wrap 前面添加文本内容，红色的文字 开始-；
在 div.wrap 后面添加图片资源，home.png;
通过给 label 元素前后添加 open-quote 和 close-quote 的属性值，增加了双引号，并且能设置样式属性为红色。
另外，我们需要了解到，伪元素之所以加个伪字，在于它虽然创建了新的元素作为某个选中元素的子元素，但它并不存在于DOM文档树中，而仅仅只是一种逻辑上的虚拟呈现。
不过，在当前浏览器的开发者工具中可以查看到部分伪元素，这可以方便我们进行调试。
如上图，左边dom文档结构中并没有伪元素，右边在浏览器的开发者工具里能看到 ::before、::after 和 ::marker 三个伪元素。
伪元素与伪类由于在写法上比较类似，所以常常被混淆，多见于把伪元素说成是伪类。
虽然并没有啥大的影响，但我们也有必要了解下它们的区别：
/*对第一个div元素应用hover状态的样式*/
div:first-child:hover {
color: #ddd;
}
/*无效，没有伪元素会产生*/
.province::before::first-letter {
content: '选择';
color: #f00;
font-size: 20px;
}
以上代码，当使用多个伪元素时，代码将失效，不会创建新元素，样式也不起作用。
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是
我正在检查一个Rails项目。在ERubyHTML模板页面上，我看到了这样几行:我不明白为什么不这样写:在这种情况下，||=和ifnil?有什么区别？ 最佳答案 在这种特殊情况下没有区别，但可能是出于习惯。每当我看到nil?被使用时，它几乎总是使用不当。在Ruby中，很少有东西在逻辑上是假的，只有文字false和nil是。这意味着像if(!x.nil?)这样的代码几乎总是更好地表示为if(x)除非期望x可能是文字false。我会将其切换为||=false，因为它具有相同的结果，但这在很大程度上取决于偏好。唯一的缺点是赋值会在每次运行
我正在阅读一本关于Ruby的书，作者在编写类初始化定义时使用的形式与他在本书前几节中使用的形式略有不同。它看起来像这样:classTicketattr_accessor:venue,:datedefinitialize(venue,date)self.venue=venueself.date=dateendend在本书的前几节中，它的定义如下:classTicketattr_accessor:venue,:datedefinitialize(venue,date)@venue=venue@date=dateendend在第一个示例中使用setter方法与在第二个示例中使用实例变量之间是
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www
大家好!我想知道Ruby中未使用语法ClassName.method_name调用的方法是如何工作的。我头脑中的一些是puts、print、gets、chomp。可以在不使用点运算符的情况下调用这些方法。为什么是这样？他们来自哪里？我怎样才能看到这些方法的完整列表？ 最佳答案 Kernel中的所有方法都可用于Object类的所有对象或从Object派生的任何类。您可以使用Kernel.instance_methods列出它们。 关于没有类的Ruby方法？，我们在StackOverflow
我的问题的一个例子是体育游戏。一场体育比赛有两支球队，一支主队和一支客队。我的事件记录模型如下:classTeam"Team"has_one:away_team,:class_name=>"Team"end我希望能够通过游戏访问一个团队，例如:Game.find(1).home_team但我收到一个单元化常量错误:Game::team。谁能告诉我我做错了什么？谢谢， 最佳答案 如果Gamehas_one:team那么Rails假设您的teams表有一个game_id列。不过，您想要的是games表有一个team_id列，在这种情况下
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用