高级选择器及伪类

心存美好 2023-03-28 原文

高级选择器及伪类

1. 回顾基础选择器

ID选择器 #id
类名选择器 .class
标签选择器 tagname
通配符选择器 *
.组合(多元素)选择器 .class,#id
后代选择器 .class #id
子元素选择器 .class>#id
毗邻选择器 .class+#id (同层级)
关联后选择器 .class~#id (同层级)

10.多选择器 div.aa.bb#cc(之间并且的关系)

2. 属性选择器

E[attr]匹配具有attr属性的E元素

a[href]{ color:red; }

[href]{border:1px sold blue}/*只要具有href属性的元素*/

E[attr=val匹配所有attr属性等于“val”的E元素

a[href=”www.baidu.com”]{ color:red; }

~= 就是某个属性包含或者等于属性值

E[attr~=val]匹配所有attr属性包含“val”或者等于“val”的E元素

img[src ~= “images aa”]{ margin:10px;}

  <style>
    [class~=box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box aa">
    BOX
  </div>
</body>

|= 就是属性以‘val’整个开头或'val-'的元素

E[attr|=val]匹配所有attr属性以“val”整个开头或'val-'的E元素

img[alt |= buy]{width:300px; }

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-1">
    BOX
  </div>
</body>

  <style>
    [class|= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

E[attr1][att2=val]匹配所有拥有attr1属性同时具有attr2等于'val'的元素

a[href][title='图片']{text-decoration:underline;}

^=就是以什么字符开头

E[attr^=val]匹配所有attr属性以“val”开头E元素

img[src^='image'] {width:300px; }

  <style>
    [class^= box] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="boxdaa">
    BOX
  </div>
</body>

$=就是以什么字符结尾

E[attr$=val] 匹配所有attr属性以“val”结尾E元素

img[src$='image'] {width:300px; }

  <style>
    [class$= e] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
  <div class="box-daa ee">
    BOX
  </div>
</body>

  <style>
    [src$= jpg] {
      width: 100px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

E[attr*=val] 匹配所有attr属性包含“val”E元素

img[src*='image'] {width:300px; }

  <style>
    [src*= mg] {
      width: 100px;
      height: 100px;
      border: 10px solid blue;
    }
  </style>
</head>

<body>
 <img src="img/1.jpg" alt="">
 <img src="img/2.png" alt="">
</body>

3. CSS3新增的结构伪类选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:last-child {
      background-color: skyblue;
      /*结构伪类选择器  父级中最后一个元素*/
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">box1
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">box2
      <p>p21</p>
      <p>p22</p>
      <p>p23</p>
    </div>
  </div>
</body>

</html>

p:first-of-type

选择p，这些p必须为它们各自父级的所有p子元素的第1个
p:last-of-type
选择p，这些p必须为它们各自父级的所有p子元素的最后1个
p:only-of-type
选择p，这些p必须为它们各自父级的唯一的p（父级中还有其他类型元素）
p:first-child
选择p，这些p必须为它们各自父级的第一个子元素
p:last-child
选择p，这些p必须为它们各自父级的最后一个子元素
p:only-child
选择p，这些p必须为它们各自父级的唯一子元素 (父级中再无其他元素)
p:nth-child(2)
选择p，这些p必须为它们各自父级的第2个子元素（
p:nth-last-child(2)
选择p，这些p必须为它们各自父级的倒数第2个子元素没有其他标签用找所有孩子
p:nth-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的第2个有其他标签用只找p
p:nth-last-of-type(2)
选择p，这些p必须为它们各自父级的所有p子元素的倒数第2个
E：first-line
表示E元素中的第一行
E：first-letter
表示E元素中的第一个字符
p:empty

选择没有内容的p
p:target

选择当前被锚点激活的p，（点击就被激活）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:target {
      background-color: purple;
      /*点击锚点激活p标签*/
    }
  </style>
</head>

<body>
  <a href="#bb">点击</a> <!--  锚点点击激活 -->
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p>p12</p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p id="bb">p23</p> <!--  锚点点击激活 -->
    </div>
  </div>
</body>

</html>

p:not(.on)

选择除了.on的p，括号中选选择器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:not(.aa){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
    </div>
  </div>
</body>

</html>

E:nth-child(odd)

匹配奇数行同p:nth-child(2n-1)

E:nth-child(even)

匹配偶数行同p:nth-child(2n)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .box {
      width: 600px;
      margin: 20px auto;
    }

    .box>div {
      width: 600px;
      box-shadow: 0 0 10px 0 #000;
      /*盒阴影*/
    }

    p {
      width: 100px;
      height: 100px;
      margin: 10px auto;
      box-shadow: 0 0 10px 0 #000;
      font-size: 14px;
      text-align: center;
      color: #000;
    }

    p:nth-child(even){
      background-color:pink
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="box1">
      <span>box1</span>
      <p>p11</p>
      <p class="aa"></p>
      <p>p13</p>
      <p>p14</p>
    </div>
    <div class="box2">
      <span>box2</span>
      <span>box2</span>
      <p>p21</p>
      <p>p22</p>
      <p>p23</p> 
      <p>p24</p> 
    </div>
  </div>
</body>

</html>

E:first-line 首行状态
E::selection 被选中的文本的样式被修改(两个冒号)

    .text::selection{
      color:red;
    }

和表单有关的伪类

:focus 处于被聚焦的状态

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    input:focus {
      border: 2px solid red;
    }

    .info {
      display: none;
    }

    input:focus+.info {
      /*  获取焦点.info显示 */
      display: block;
    }
  </style>
</head>

<body>
  <input type="text">
  <div class="info">请输入内容</div>
</body>

</html>

:checked 表单被勾选的状态(几乎只有表单可以记录状态)
:disabled 选择不能被操作的input框
:enabled 选择能被操作的input框

4. 伪元素的使用

一个盒子(非单标签)有两个伪元素,叫before/after

正常的元素（标准的标签）是在标签的嵌套中使用添加内容，伪元素在content中添加内容，伪元素都是行内元素

4.1 伪元素的写法

E::before{
    content: "";  /* 激活伪元素 一定要有，内容可以为空“”*/
}
E::after{
    content:"";
}

  <style>
    div::before {
      content: "大";
      color: red;
      font-size: 26px;
    }

    div::after {
      content: "有点不容易";
      /* display:block;伪元素都是行内元素 */

      color: blue;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div>前端学习</div>
</body>

小三角
 <style>
    div::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: 30px solid transparent; 
      border-right-color: red;
    }
  </style>
</head>

<body>
  <div>前端学习</div>
</body>

content:（一定要加！！！）

content是伪元素的内容样式,必须写

string: 在节点之前插入文字

attr(attrname): 在节点中插入元素属性的值

url(媒体文件): 比如图片

content: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png);

4.2 伪元素和伪类的区别:

伪元素是元素,伪类是状态/条件

4.3 伪元素和普通元素的区别

锦上添花(本意是替换空标签,比如加小三角)

几乎没有区别

写法不一样,(css添加的)

需要css渲染完成才知道有无伪元素,不影响布局结构,

百度爬虫爬不到伪元素，百度对空标签不友好

4.4 伪元素性质:

行内元素
before在标签正文内容前,可以理解为标签开始内容的前面的元素
after在标签的结尾之前,可以理解为正文内容之后
具有文本属性,
CSS创建的抽象元素,是个虚拟的容器
多用于清除浮动

伪元素清除浮动
  <style>
    div {
      width: 500px;
      border: 3px solid red;
    }

    p {
      float: left;
      width: 100px;
      height: 50px;
      background-color: skyblue;
      font-size: 30px;
      margin: 0 20px;
      text-align: center;
    }

    /* span{  
      display:block;
      clear:both;
    } */
    div::after {
      /* 伪元素解决高度塌陷 清除浮动*/
      content: '';
      display: block;
      clear: both
    }
  </style>
</head>

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <!--   <span></span>之前解决高度塌陷在元素最后加一个块元素 ，这里把span变成块了 -->
  </div>

</body>

背景及圆角

1. 复习元素背景

背景属性background

1.1. 背景颜色 `background-color`

属性值:

颜色单词 red
十六进制 #f00
rgb r:red g:green b:blue取值范围都是0-255
rgba a:Alpha取值范围0-1,(透明度)
HSL H:Hue色调取值范围0-360 S:Saturation饱和度取值范围0%-100% L:Lightness亮度取值范围0%-100% .HSLA` Alpha透明度。取值0~1之间。
transparent: 默认,透明,不继承
currentcolor: 当前色, currentcolor等于当前的color值

background-color:currentcolor;

1.2. 背景图片 `background-image`

属性值:

url(“图片路径“)
none 不使用背景图片(初始默认值)

多背景写法:

多个背景以“，”隔开，不限个数

background-image: url(“1”) , url(“2”) ;

图片格式:

.jpg 不支持动画,不支持透明,渐进显示,颜色丰富,有损
.png 不支持动画,支持透明度, 颜色更丰富,无损
.gif 支持动画,256种颜色,2种透明度,渐进显示
.webp支持动画,高压缩率,高加载速率,点个赞

background-image:url('图片路径');

1.3. 背景图片平铺 `background-repeat`

属性值:

no-repeat不平铺,背景图片只显示一次
repeat-x水平方向平铺
repeat-y垂直方向平铺
repeat默认值(水平垂直方向都平铺)

可以分解成两个属性:

background-repeat-x
. background-repeat-y

background-repeat: repeat-x;

1.4. 背景图片位置 `background-position`

可以设置两个值,如果只设置一个值,另一个默认为center

属性值:

关键词 top / right / bottom / right / center
属性值是两个关键词,一个的话第二个就是默认center
百分数 (水平% 竖直%) 百分比相对于父级容器

如果只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为50%
像素值 (水平px 竖直px)

可以分解成两个属性:

background-position-x
background-position-y

background-position:20px 30px;

1.5. 背景图片大小 `background-size`

属性值:

像素值,有两个,如果写一个,第二个就默认auto
百分数,按原始比例缩放; 百分比相对于父级容器
cover 图片缩放,直到整个背景图片占满背景框

保持宽高比不变，保证占满盒子，但是不一定能看到全部图
contain 图片缩放,直到背景图片有一边触碰到背景边框就停止缩放

保持宽高比不变，保证看清全图，但是不一定占满盒子

数值可以写一个可以写两个,如果只有一个第二个就是默认

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
    }

    .main div:nth-of-type(2) {
      background-size: 100px 50px;
    }

    .main div:nth-of-type(3) {
      background-size: 50% 50%;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>默认背景图片</p>
    <div></div>
    <p>background-size:100px 50px 的背景</p>
    <div></div>
    <p>background-size:50% 50% 的背景</p>
    <div></div>
    <p>background-size:cover的背景</p>
    <div></div>
  </div>
</body>

1.6. 背景图片关联 background-attachment

属性值:

scroll 默认值,背景图片随着页面滚动而滚动,背景图片附着在容器里
fixed 固定值,背景图片不随着页面滚动而滚动,背景图片附着在浏览器窗口里

  <style>
    body {
      padding-left: 180px;
      background: url('http://www.hshkyl.com/uploads/allimg/20/1-20091H01623638.jpg') no-repeat 0 0/contain;
      background-attachment: fixed;    /* 背景图片固定 */
    }
  </style>
</head>

<body>
  <div>
    <p>这是p标签1</p>
    <p>这是p标签2</p>
    <p>这是p标签3</p>
    <p>这是p标签4</p>
    <p>这是p标签5</p>
    <p>这是p标签6</p>
    <p>这是p标签100</p>
  </div>

1.7. 背景图片显示基点(起始域) `background-origin`

属性值:

padding-box 默认值，从padding区域起始
content-box 从内容部分起始
border-box 从border区域起始

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div:nth-of-type(2) {
      background-origin: content-box;
      background-size: 100% 100%;
    }

    .main div:nth-of-type(3) {
      background-origin: border-box;
    }

    .main div:nth-of-type(4) {
      background-size: cover;
    }
  </style>
</head>

<body>
  <div class="main">
    <p>background-origin默认背景图片的起始域为padding-box</p>
    <div></div>
    <p>background-origin从内容区content-box显示背景</p>
    <div></div>
    <p>background-origin从内容区border-box显示背景</p>
    <div></div>
  </div>
</body>

1.8. 背景图片裁剪区域 `background-clip`

属性值:

border-box 默认值，从border区域开始显示背景,背景被裁剪到盒子边框
content-box 从内部区域开始显示背景.背景被裁剪到内容区域
padding-box 从padding区域开始显示背景,背景被裁剪到内边距
text 相对于文本

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: border-box;
    }

    .main div:nth-of-type(2) {
      background-clip: padding-box;
    }

    .main div:nth-of-type(3) {
      background-clip: content-box;
    }
  </style>
</head>

<body>
  <div class="main">

    <p>background-clip从border默认</p>
    <div></div>
    <p>background-clip从padding</p>
    <div></div>
    <p>background-clip从content</p>
    <div></div>
  </div>
</body>

/*text相对于文本*/
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .main {
      width: 400px;
      margin: 50px auto;
      background-color: #f3f3f3;
    }

    .main p {
      font-size: 20px;
      text-align: center;
      line-height: 50px;
    }

    .main div {
      width: 300px;
      height: 300px;
      box-shadow: 0 0 20px 0 blue;
      background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F411%2F0616111FP6%2F1106161FP6-0.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652491360&t=b8a95b24ff4a24125001e09027ba8514) no-repeat;
      margin: 10px auto;
      border: 30px dashed deeppink;
      padding: 20px;
    }

    .main div {
      background-origin: border-box;
      background-size: 80% 80%;
    }

    .main div:nth-of-type(1) {
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      font-size: 100px;
      text-align: center;
      font-weight: bolder;
      /* transition: 3s; */
      animation: run 3s infinite alternate;
    }

    /* .main div:nth-of-type(1):hover{
      background-position: -30px 0;
    } */
    @keyframes run {
      0% {
        background-position: 20px 0;
      }

      100% {
        background-position: -30px 0;
      }
    }
  </style>
</head>
<body>
  <div class="main">
    <p>background-clip从border默认</p>
    <div>你好</div>
  </div>
</body>

1.9. 背景的综合样式

background:color image repeat position/size attachment origin clip;

省略部分会被默认值替代,
position和size之间要用/分割

高级选择 gt lt code

有关高级选择器及伪类的更多相关文章

ruby - Rails 3 的 RGB 颜色选择器 - 2
状态:我正在构建一个应用程序，其中需要一个可供用户选择颜色的字段，该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”，并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。最佳答案也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中，因此使用基
ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗？ - 2
我完全不是程序员，正在学习使用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
ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2
我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？最佳答案如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模
ruby-on-rails - CarrierWave - PDF - 只选择第一页 - 2
我的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
ruby-on-rails - ActiveAdmin 自定义选择过滤器下拉名称 - 2
对于用户模型，我有一个过滤器来检查用户的预订状态，该状态由整数值(0、1或2)表示。UserActiveAdmin索引页上的过滤器是通过以下代码实现的:filter:booking_status,as::select然而，这会导致下拉选项为0、1或2。当管理员用户从下拉列表中选择它们时，我更愿意自己将它们命名为“未完成”、“待定”和“已确认”之类的名称。有没有办法在不改变booking_status在模型中的表示方式的情况下做到这一点？最佳答案假设booking_status是模型中的枚举字段，您可以使用:过滤器:booking
ruby-on-rails - 多次选择一个随机数，但绝不会两次选择相同的随机数 - 2
这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:HowdoIgeneratealistofnuniquerandomnumbersinRuby?我想做的事:Random.rand(0..10).timesdoputsRandom.rand(0..10)end但如果随机数已经显示过，则无法再次显示。如何最轻松地做到这一点？
ruby - mixin方法名冲突时如何选择调用方法？ - 2
当你在类中包含方法名冲突的模块时，它会使用类定义的方法。有没有办法选择我想运行的？moduleBdefself.hello"helloB"endendclassAincludeBdefself.hello"helloA"endendA.hello#=>thisprints"helloA",whatifIwant"helloB"? 最佳答案 Ben，当你在Ruby中调用一个方法(比如hello)时，会发生以下情况:如果接收者的特征类有一个名为hello的方法，它将被调用。如果不是:如果接收者的类有一个名为hello的实例方法，它将被调
ruby - 更快的 n 选择 k 来组合数组 ruby - 2
在尝试解决“网格上的路径”问题时，我编写了代码defpaths(n,k)p=(1..n+k).to_ap.combination(n).to_a.sizeend代码工作正常，例如ifn==8andk==2代码返回45，这是正确的路径数。但是，当使用较大的数字时，代码非常慢，我正在努力想出如何加快这个过程。最佳答案与其构建组合数组只是为了计算它，不如编写function定义组合的数量。我敢肯定还有包含此功能和许多其他组合函数的gem。请注意，我使用的是gemDistribution对于Math.factorial方法，但这是另一种
ruby - 选择包含子节点内文本的父节点 - 2
基本上我想选择一个节点(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语法来做到这一点？最佳答案
ruby - Nokogiri 'not' 选择器 - 2
Nokogiri中是否有一种方法可以选择所有与选择器不匹配的元素。在jQuery中我会使用::not(*[@class='someclass'])但是下面的代码给我一个xpath语法错误dom=Nokogiri::HTML(@file)dom.css(":not(*[@class='someclass'])") 最佳答案 InCSS3,:not()takesaselectorlikeanyother，所以它会是:dom.css(":not(.someclass)")(未经测试，但选择器是正确的)

高级选择器及伪类