英文:
CSS a{} tag only works not .container with my HTML Buttons
问题
我有这个问题，例如，我需要分别更改两个框，但这是不可能的，我只能通过a{}标签来编辑它们。但我想以不同的方式更改它们两个。
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
这个方法不起作用。
style.css
.box1 {
text-decoration: none;
margin-left: 50px;
}
这个方法可以，但我需要分别编辑框而不是所有的 "a{}"。
a{
text-decoration: none;
margin-left: 50px;
}
我有这个问题，例如，我需要分别更改两个框，但这是不可能的，我只能通过a{}标签来编辑它们。但我想以不同的方式更改它们两个。
英文:
I've this problem, for example I need to change two Boxes separately but it's not possible I can only edit them all via a{} tags. But I'd like to change them both in the different way.
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
This doesnt work.
style.css
.box1 {
text-decoration: none;
margin-left: 50px;
}
This works, but I need to edit boxes separately not all "a{}"
a{
text-decoration: none;
margin-left: 50px;
}
I've this problem, for example I need to change two Boxes separately but it's not possible I can only edit them all via a{} tags. But I'd like to change them both in the different way.
答案1
得分: 0
在以下代码中：
.box1 {
text-decoration: none;
margin-left: 50px;
}
你正在选择具有box1类的元素，而不是其中的超链接标签，margin应用于整个div，而div本身没有任何文本装饰，因此不会产生任何效果。
你需要选择每个盒子的子元素，为此可以使用子元素选择器，有关详细信息，请参阅这里。
以下是如何选择每个盒子的子元素的方法：
/* 选择 box1 */
div.box1 {
background-color: rgb(10, 10, 10);
/* 选择它的 'a' 子元素 */
& > a {
text-decoration: none;
color: rgb(170, 170, 250);
}
}
/* 选择 box2 */
div.box2 {
background-color: rgb(70, 70, 70);
/* 选择它的 'a' 子元素 */
& > a {
text-decoration: none;
color: rgb(250, 170, 170);
}
}
此外，以下是在 CSS 中使用超链接可以实现的一些效果：
/* 选择 box1 */
div.box1 {
background-color: rgb(10, 10, 10);
/* 选择它的 'a' 子元素 */
& > a {
text-decoration: none;
color: rgb(200, 200, 200);
}
}
/* 选择 box2 */
div.box2 {
background-color: rgb(60, 60, 60);
/* 选择它的 'a' 子元素 */
& > a {
text-decoration: none;
color: rgb(150, 150, 150);
}
}
/* 选择所有 div 元素中的超链接 */
div > a {
/* 如果链接已被访问，应用的样式 */
&:visited {
opacity: .5;
}
/* 如果链接尚未被访问，应用的样式 */
&:link {
filter: brightness(1);
}
/* 如果鼠标悬停在链接上，应用的样式 */
&:hover {
filter: brightness(1.5);
}
/* 如果链接被按下，应用的样式 */
&:active {
filter: brightness(2);
}
}
英文:
In the following code:
.box1 {
text-decoration: none;
margin-left: 50px;
}
you're selecting the element with the box1 class, not the hyperlink tags inside of it, the margin is applied to the whole div and the div doesn't have any text decoration to begin with so that does nothing.
You need to select the children of each box, to do that use the children selector, more on that here.
Here is how to select the children of each box:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-css -->
/* Selecting box1 */
div.box1 {
background-color: rgb(10, 10, 10);
/* Selecting it's 'a' children */
& > a {
text-decoration: none;
color: rgb(170, 170, 250);
}
}
/* Selecting box2 */
div.box2 {
background-color: rgb(70, 70, 70);
/* Selecting it's 'a' children */
& > a {
text-decoration: none;
color: rgb(250, 170, 170);
}
}
<!-- language: lang-html -->
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
<!-- end snippet -->
Additionally here are some of the things you can do with hyperlinks in CSS:
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-css -->
/* Selecting box1 */
div.box1 {
background-color: rgb(10, 10, 10);
/* Selecting it's 'a' children */
& > a {
text-decoration: none;
color: rgb(200, 200, 200);
}
}
/* Selecting box2 */
div.box2 {
background-color: rgb(60, 60, 60);
/* Selecting it's 'a' children */
& > a {
text-decoration: none;
color: rgb(150, 150, 150);
}
}
div > a {
/* Style to apply if the link has been visited */
&:visited {
opacity: .5;
}
/* Style to apply if the link has not been visited */
&:link {
filter: brightness(1);
}
/* Style to apply if the link is being hovered */
&:hover {
filter: brightness(1.5);
}
/* Style to apply if the link is being pressed */
&:active {
filter: brightness(2);
}
}
<!-- language: lang-html -->
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
<!-- end snippet -->
答案2
得分: -1
我没有完全理解，但我理解的是，如果您有一张图像或创建您想要的示例图像，然后我可以帮助您。
<!DOCTYPE html>
<html>
<head>
<style>
.box1 a.TestButton1 {
text-decoration: none;
margin-left: 50px;
color: blue;
}
.box2 a.TestButton2 {
text-decoration: underline;
margin-left: 20px;
color: green;
}
.box1 a{
color: red;
}
.box2 a{
color: brown;
}
a {
text-decoration: none;
margin-left: 10px;
color: black;
}
</style>
</head>
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
</html>
英文:
I did not understand properly but what i understand that i do if you have a image or create image what you want example then i can you help you properly
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<style>
.box1 a.TestButton1 {
text-decoration: none;
margin-left: 50px;
color: blue;
}
.box2 a.TestButton2 {
text-decoration: underline;
margin-left: 20px;
color: green;
}
.box1 a{
color: red;
}
.box2 a{
color: brown;
}
a {
text-decoration: none;
margin-left: 10px;
color: black;
}
</style>
</head>
<body>
<div class="box1">
<a class="TestButton1" href="#">Test1</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
<div class="box2">
<a class="TestButton2" href="#">Test2</a>
<a href="#">Home</a>
<a href="#">Contact</a>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论