层叠样式表 (英文全称：Cascading Style Sheets)是一种用来表现 HTML （ 标准通用标记语言 的一个应用）或 XML （标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
在标签内部通过style属性来设置元素的样式
问题：使用内联样式，样式只能对该标签生效
将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式。
优点：
内部样式表更加方便对样式进行复用
缺点：
内部样式表只能对一个网页起作用，不能跨页面进行复用
可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。
优点：
根据标签名来选中指定的元素，语法为：标签名{}，比如：p{}、h1{}、div{}等
根据元素的id属性值选中一个元素，语法为：#id属性值{}，比如：#box{} #red{}等
根据元素的class属性值选中一组元素，语法为：.class属性值。
类选择器和id类似，不同的是class可以重复使用，可以通过class属性来为元素分组。
可以同时为一个元素指定多个class属性。
选中页面中的所有元素，语法为：*
同时复合多个条件的元素，语法为：选择器1选择器2选择器3选择器n{}。
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
同时选择多个选择器对应的元素，语法：选择器1,选择器2,选择器3,选择器n{}
选中指定元素内的指定后代元素，语法：祖先 后代
选中指定父元素的指定子元素，语法：父元素 > 子元素
选择同一个父类元素下一个兄弟，语法：前一个 + 下一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
div + span {
color: red;
}
</style>
</head>
<body>
<div></div>
<span> 我是div外的span </span>
</body>
</html>
选择下边所有的兄弟，语法：兄 ~ 弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p ~ span {
color: red;
}
</style>
</head>
<body>
<div>
我是一个div
<p>
我是div中的p元素
<span>我是p元素中的span</span>
</p>
<div></div>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
<span>我是div中的span元素</span>
</div>
</body>
</html>
[属性名] 选择含有指定属性的元素
[属性名=属性值] 选择含有指定属性和属性值的元素
[属性名^=属性值] 选择属性值以指定值开头的元素
[属性名$=属性值] 选择属性值以指定值结尾的元素
[属性名*=属性值] 选择属性值中含有某值的元素的元素
伪类（即不存在的类，特殊的类），用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素等。
一般情况下都是使用 : 开头。
:first-child 第一个子元素<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
ul > li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第〇个</li>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
</body>
</html>
:last-child 最后一个子元素ul > li:last-child {
color: red;
}
:nth-child() 选中第n个子元素2n+1 或 odd 表示选中奇数位的元素ul > li:nth-child(odd) {
color: red;
}
2n 或 even 表示选中偶数位的元素ul > li:nth-child(even) {
color: red;
}
n 第n个 n的范围0到正无穷ul > li:nth-child(n) {
color: red;
}
:not() 否定伪类可以将符合条件的元素从选择器中去除
ul > li:not(:nth-of-type(3)) {
color: yellowgreen;
}
以下几个伪类的功能和上述的类似，不同点是以下伪类要在同类型元素中进行排序
:first-of-type
:last-of-type
:nth-of-type()
:only-of-type
:empty
:link 用来表示没访问过的链接（正常的链接）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:link {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">没访问过的链接</a>
</body>
</html>
点击后就会从蓝色触发成红色，再跳转
:visited 用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:visited {
color: orange;
font-size: 50px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
</body>
</html>
:hover 用来表示鼠标移入的状态<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:hover {
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">访问过的链接</a>
</body>
</html>
:active 用来表示鼠标点击<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
a:active {
color: yellowgreen;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">链接效果跟link一样</a>
</body>
</html>
伪元素：
页面中一些特殊的并不真实的存在的元素（即在特殊的位置指定显示渲染效果），伪元素使用 :: 开头
::first-letter 表示第一个字母<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p::first-letter {
font-size: 50px;
}
</style>
</head>
<body>
<p>Lorem</p>
</body>
</html>
::first-line 表示浏览器边框下的第一行<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p::first-line {
background-color: yellow;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque velit
modi veniam nisi veritatis tempore laborum nemo ipsa itaque optio.
Id odit consequatur mollitia excepturi, minus saepe nostrum vel
porro.
</p>
</body>
</html>
::selection 表示选中的内容<style>
p::selection {
background-color: greenyellow;
}
</style>
::before 元素的开始插入内容<style>
div::before {
content: '『';
}
</style>
::after 元素的最后插入内容div::after {
content: '』';
}
注意：
before 和 after 必须结合content属性来使用
视频（P28~P36）：
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
tip:
如果无法上github，可以使用dev-sidecar加速：https://blog.csdn.net/m0_51973551/article/details/120675918
gitee的暂未找到合适的
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes
我完全不是程序员，正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3，但我想知道我是否应该升级到Ruby1.9，因为我真的没有任何升级的“遗留”成本。缺点是什么？我是否会遇到与普通gem的兼容性问题，或者甚至其他我不太了解甚至无法预料的问题？ 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem，请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问，您可以在以下位置查看:http://www.railsplugins.or
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
我的Rails应用程序中安装了carrierwave。但是，当用户上传多页pdf时，我只希望应用程序获取文档中的第一页并将其转换为jpeg。这可能吗？用什么命令？这是我的uploader。#encoding:utf-8classImageUploader[200,300]##defscale(width,height)##dosomething#end#Createdifferentversionsofyouruploadedfiles:version:thumbdoprocess:resize_to_fill=>[150,210]process:convert=>:jpgdefful
对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？ 最佳答案 假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？
我开始了一个新的Rails3.2.5项目，Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1
rails新手。只是想了解\assests目录中的这两个文件。例如，application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文，我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢？我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件？同样，我正在按照一些说明安装TwitterBootstrap(http: