无法选择具有 ID 和类名的元素？

所以我现在正在研究HTML和CSS，目前我面临着在CSS中选择元素的疑问。所以我知道这是我们用来选择一个类的。Classname｛｝，对于Id，我们使用#IDname｛}。但我的主要困惑是，我无法选择像#ID这样的项目。类｛｝。下面是我所说的例子。请帮忙？

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>

CSS代码：-

.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和之间保持空格

尽管这是不推荐的，因为它非常深，但仍然有可能。#name.containerdiv.cta｛｝

wwen#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>

相关内容

最新更新

热门标签：