目录
（5）需要修改的话则要把nth-child(1)改成nth-child(2)
作用:选择页面上的某一个或者某一类元素
（1）基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 标签选择器，会选择到页面上所有的这个标签元素 */
h1 {
/*这个color就是颜色，badground:就是背景，border-radius:就是边框弧度大小*/
color: #517851;
badground: #150101;
border-radius: 20px;
}
p{
/*字体大小*/
font-size: 70px;
}
</style>
</head>
<body>
<h1>学java</h1>
<h1>学Java</h1>
<p>看我的！</p>
</body>
</html>
运行结果：
（2）类选择器 class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 类选择器的格式，.class的名称{}
好处，可以多个标签归类，是同一个class，可以复用
*/
.shan{
color: #4036bb;
}
.shanmu{
color: #c43a3a;
}
</style>
</head>
<body>
<h1 class="shanmu">标题1</h1>
<h1 class="shan">标体2</h1>
<h1 class="shan">标体3</h1>
<P class="shan">p标签</P>
</body>
</html>
运行结果：
（3）id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
id选择器：id必须保证全局唯一
#id名称{}
优先级：
不遵循就近原则，固定的
id选择器 > clss选择器 > 标签选择器
*/
#shanmu {
color: #4036bb;
}
.style1 {
color: #4036;
}
h1 {
color: aqua;
}
#sanmu{
color: #150101;
}
</style>
</head>
<body>
<h1 class="style1" id="shanmu">标签1</h1>
<h1 class="style1" id="sanmu">标签2</h1>
<h1 class="style1">标签3</h1>
<h1>标签4</h1>
<h1>标签5</h1>
<h1>标签6</h1>
</body>
</html>
运行结果：
（1）后代选择器
/* 后代选择器*/
body p{
background: red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #4036bb;*/
/*}*/
/* 后代选择器*/
body p{
background: red;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
输出结果：
（2）子选择器
/* 子选择器*/
body>p{
background: #517851;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 子选择器*/
body>p{
background: #517851;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
</html>
输出结果：
（3）相邻兄弟选择器
/* 相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p {
background: green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 相邻兄弟选择器：只有一个，相邻（向下）*/
.active + p {
background: green;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p class="active">p7</p>
<p>p8</p>
</body>
</html>
输出结果：
（4）通用选择器
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: brown;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*p{*/
/* background: #4036bb;*/
/*}*/
/*!* 后代选择器*!*/
/* body p{*/
/* background: red;*/
/* }*/
/*!* 子选择器*!*/
/* body>p{*/
/* background: #517851;*/
/* }*/
/*!* 相邻兄弟选择器：只有一个，相邻（向下）*!*/
/*.active + p {*/
/* background: green;*/
/*}*/
/* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
background: brown;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>
输出结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--不使用 class选择器 id选择器 的前提下-->
<style>
/*ul的第一个子元素*/
ul li:first-child {
background: #66c81e;
}
/*ul的最后个子元素*/
ul li:last-child {
background: #c82527;
}
/*
选中p1 定位到父元素，选择当前的第一个元素 顺序
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1) {
background: #47c8bc;
}
/*选中父元素下的p元素的第二个，类型 */
p:nth-of-type(2) {
background: #356fc8;
}
/*鼠标悬停 */
a:hover {
background: #c8c557;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<a>link</a>
</body>
</html>输出结果：
p1：使用
p:nth-child(1) {
background: #47c8bc;
}p2：使用
p:nth-of-type(2) {
background: #356fc8;
}li1：使用
ul li:first-child {
background: #66c81e;
}li3 ：使用
/*ul的最后个子元素*/
ul li:last-child {
background: #c82527;
}
（1）这个就是ul的第一个元素
/*ul的第一个子元素*/
ul li:first-child {
background: #2071c7;
}
输出结果：
（2）这个是ul的最后一个元素
/*!* ul的最后一个子元素*!*/
ul li:last-child {
background: #26de26;
}
输出结果：
（3）选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: rgba(45, 44, 44, 0.86);
}
输出结果：
（4）如果第一个标签不是p，则就无效
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(1){
background: rgba(45, 44, 44, 0.86);
}
输出结果：
（5）需要修改的话则要把nth-child(1)改成nth-child(2)
/* 选中p1 ：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(2){
background: rgba(45, 44, 44, 0.86);
}
输出结果：
（6）选中父元素，下的p元素的第二个，类型
/* 选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
background: #4036bb;
}
输出结果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo a {
/*向左浮动*/
float: left;
/*将元素显示为块元素*/
display: block;
/*高度*/
height: 50px;
/*宽度*/
width: 50px;
/*圆角弧度*/
border-radius: 10px;
/*背景颜色*/
background: #a12727;
/*对其方式：居中对齐*/
text-align: center;
/*文字颜色*/
color: #4036bb;
/*外边距*/
text-decoration: none;
/* 每个元素往右边偏移5个距离*/
margin-right: 5px;
/* font 后面是粗体，粗体大小*/
font: bold 20px/50px Arial;
}
/* 属性名，属性名=属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
*/
/*存在id属性的元素， a[]{}*/
/*a[id]{*/
/*background: #517851;*/
/*}*/
/*与上面效果是一样的*/
/*id=first的元素*/
/*a[id=first] {*/
/* background: bisque;*/
/*}*/
/* class中有links的元素 */
/*a[class*="links"] {*/
/* background: yellowgreen;*/
/*}*/
/* 选中href中以http开头的元素*/
/*a[href^=http] {*/
/* background: yellow;*/
/*}*/
a[href$="jpg"]{
background: #7570aa;
}
</style>
</head>
<body>
<p class="demo">
<a href="https://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="img/123.html" class="links item">3</a>
<a href="img/123.png" class="links item">4</a>
<a href="img/123.jpg" class="links item">5</a>
<a href="abc" class="links item">6</a>
<a href="/a.pdf" class="links item">7</a>
<a href="/abc.pdf" class="links item">8</a>
<a href="abc.doc" class="links item">9</a>
<a href="abcd.doc" class="links item last">10</a>
</body>
</html>
（1）直接使用id属性
/*存在id属性的元素， a[]{}*/
a[id]{
background: #517851;
}
输出结果：
（2）id=first的元素
/*与上面效果是一样的*/
/*id=first的元素*/
a[id=first] {
background: bisque;
}
输出结果：
（3）class中有links的元素
/* class中有links的元素 */
a[class*="links"] {
background: yellowgreen;
}
输出结果：
（4）选中href中以http开头的元素
/* 选中href中以http开头的元素*/
a[href^=http] {
background: yellow;
}
输出结果：
（5）选中结尾为jpg的元素
/*选中结尾为jpg的元素*/
a[href$="jpg"]{
background: #7570aa;
}
输出结果：
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
我完全不是程序员，正在学习使用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但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？
当你在类中包含方法名冲突的模块时，它会使用类定义的方法。有没有办法选择我想运行的？moduleBdefself.hello"helloB"endendclassAincludeBdefself.hello"helloA"endendA.hello#=>thisprints"helloA",whatifIwant"helloB"? 最佳答案 Ben，当你在Ruby中调用一个方法(比如hello)时，会发生以下情况:如果接收者的特征类有一个名为hello的方法，它将被调用。如果不是:如果接收者的类有一个名为hello的实例方法，它将被调
在尝试解决“网格上的路径”问题时，我编写了代码defpaths(n,k)p=(1..n+k).to_ap.combination(n).to_a.sizeend代码工作正常，例如ifn==8andk==2代码返回45，这是正确的路径数。但是，当使用较大的数字时，代码非常慢，我正在努力想出如何加快这个过程。 最佳答案 与其构建组合数组只是为了计算它，不如编写function定义组合的数量。我敢肯定还有包含此功能和许多其他组合函数的gem。请注意，我使用的是gemDistribution对于Math.factorial方法，但这是另一种
基本上我想选择一个节点(div)，其中它的子节点(h1,b,h3)包含指定的文本。Childtext1Childtext2...Childtext3我期待的是/html/div/而不是/html/div/h1我在下面有这个，但不幸的是返回了child，而不是div的xpath。expression="//div[contains(text(),'Childtext1')]"doc.xpath(expression)我期待的是/html/div/而不是/html/div/h1那么有没有一种方法可以简单地使用xpath语法来做到这一点？ 最佳答案
Nokogiri中是否有一种方法可以选择所有与选择器不匹配的元素。在jQuery中我会使用::not(*[@class='someclass'])但是下面的代码给我一个xpath语法错误dom=Nokogiri::HTML(@file)dom.css(":not(*[@class='someclass'])") 最佳答案 InCSS3,:not()takesaselectorlikeanyother，所以它会是:dom.css(":not(.someclass)")(未经测试，但选择器是正确的)