英文:
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本身没有任何文本装饰，所以这个样式不起作用。
你需要选择每个box的子元素，可以使用子选择器来实现，更多信息可以参考这里。
以下是如何选择每个box的子元素的示例：
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-css -->
/* 选择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);
}
}
<!-- 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 -->
此外，以下是在CSS中使用超链接的一些其他操作：
<!-- begin snippet: js hide: true console: true babel: true -->
<!-- language: lang-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 > a {
/* 如果链接已访问过，则应用的样式 */
&:visited {
opacity: .5;
}
/* 如果链接尚未访问过，则应用的样式 */
&:link {
filter: brightness(1);
}
/* 如果链接被悬停，则应用的样式 */
&:hover {
filter: brightness(1.5);
}
/* 如果链接被按下，则应用的样式 */
&: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 -->
英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论