无法选择具有 ID 和类名的元素？
Posted
技术标签:
【中文标题】无法选择具有 ID 和类名的元素？【英文标题】：Can't Select Element with ID and Classname? 【发布时间】：2022-01-04 19:09:39 【问题描述】：所以我现在正在研究 html 和 CSS，目前我面临着关于在 CSS 中选择元素的疑问。 所以我知道，我们使用 .Classname 来选择一个类，而对于 Id，我们使用 #IDname。 但我的主要困惑是我无法选择像这些#ID.Class 这样的项目。以下是我正在谈论的示例。请帮忙？
HTML CODE
<!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>Anime Website Design</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<!-- Name Section -->
<section id="name">
<div class="name container">
<div>
<h1 class="Heading">Hello ,Sumit is here ! </h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
</body>
.cta //Works Fine
font-family:'Neucha',cursive;
display: inline-block;
text-decoration:none;
padding: 1px 10px;
color: white;
border: 2px solid crimson;
border-radius: 7px;
font-size:22px;
background-color: transparent;
margin-top:3px;
transition: ease .5s background-color;
text-transform: uppercase;
现在这个显示错误，但在在线教程中，它被有效地使用了。我不知道为什么我不能用这个选择它..这甚至允许吗？如果我听起来很愚蠢，请原谅我
#name.cta //THIS SHOWS ERROR(NOT ABLE TO GET OUTPUT)
font-family:'Neucha',cursive;
display: inline-block;
text-decoration:none;
padding: 1px 10px;
color: white;
border: 2px solid crimson;
border-radius: 7px;
font-size:22px;
background-color: transparent;
margin-top:3px;
transition: ease .5s background-color;
text-transform: uppercase;
【问题讨论】：
尝试：#name。 cta #name 和 . cta 在此处阅读有关 CSS 选择器的信息：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 空格有意义且很重要 - 但 #name .cta 中的点后没有空格 感谢@PRAKASHSOLANKI 和@A Haworth 提供文章和解决方案 但是在那篇文章的任何地方都没有提到空间的使用 【参考方案1】：#name 和 .cta 之间的空格 试试这个代码：
#name .cta
font-family:'Neucha',cursive;
display: inline-block;
text-decoration:none;
padding: 1px 10px;
color: #000;
border: 2px solid crimson;
border-radius: 7px;
font-size:22px;
background-color: transparent;
margin-top:3px;
transition: ease .5s background-color;
text-transform: uppercase;
<!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>Anime Website Design</title>
</head>
<body>
<!-- Name Section -->
<section id="name">
<div class="name container">
<div>
<h1 class="Heading">Hello ,Sumit is here ! </h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
</body>
</html>【讨论】：
请不要回答仅由一个错字引起的问题。请改用评论选项（您以 50 声望解锁它，缺少声望不允许您误用答案选项来绕过该限制）。也将问题标记为not reproducable or caused by typos。【参考方案2】：
虽然这不是推荐的，因为它很深，但仍然可行。 #name .container div .cta
【讨论】：
深意？【参考方案3】：#name .cta
在 #name 和 , 之间保留空格
【讨论】：
以上是关于无法选择具有 ID 和类名的元素？的主要内容，如果未能解决你的问题，请参考以下文章