你如何只为 1 个元素添加 css

编程问答 2022-05-11

问题描述

例如我想要这个：

<link rel="stylesheet" href="stylus.css">

仅针对此代码：

<a href="yeet">Buy!</a>

解决方法

如果你只将它用于一个，那么使用 id 和 #，对于多个元素你使用 class 和 .

#only-this {
  color: red;
}
<a id="only-this" href="yeet">Buy!</a>
<a href="yeet">Sell!</a>

,

您可以在 CSS 中创建一个类，然后将其应用到您的对象中：

var lastScrolled = 0;

$("#search-label").on("keypress",function(e) {
  if((e.which == 13) && (Date.now() >= (lastScrolled + 10000))) {
    $('html,body').animate({
      scrollTop: $("#content").offset().top
    },2000);   
    lastScrolled = Date.now();
  }
});

.my-stylus-class {
  color: blue;
}

我想补充一点，类或 ID 不是必需的，您当然也可以在 CSS 中定义元素本身，例如这也是可能的：

<a class="my-stylus-class" href="yeet">Buy!</a>
a {
  color: blue;
}

,

你需要在你的html上做一个标识，然后在CSS页面上选择它，比如：

HTML：

<a id="buyButton">Buy!</a>

然后在 CSS 上：

#buyButton
{
  color : blue;
}
,

你不能告诉浏览器只为某个元素使用特定的样式表（文件）。

你必须给元素一个特定的 ID 或类，并在你的 css 中使用它，例如：

.yeet {
  /* CSS Properties go here */
}
<a href="yeet" class="yeet">Buy!</a>

,

内联 css。

<a href="yeet" style="css here">Buy!</a>
,

这就是问题所在：一个元素。一个类可以有多个元素。在这里，使用内联 CSS，并不比样式表 CSS 差，您可以使您的 yeets 具有不同的样式。 

<a href="yeet" style="color:red;">Buy!</a>
<br>
<a href="yeet" style="color:orange;">Buy!</a>
<br>
<a href="yeet" style="color:green;">Buy!</a>
<br>
<a href="yeet" style="color:blue;">Buy!</a>
<br>
<a href="yeet" style="color:indigo;">Buy!</a>
<br>
<a href="yeet" style="color:violet;">Buy!</a>
<br>
<a href="yeet" style="color:chartreuse;">Buy!</a>

htmlw3.css