英文:
* selector in css not working when used with class
问题
我正在创建一个HTML网站。我在其中使用了一个现成的HTML联系表单。其CSS代码如下：
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
当我将它插入到我的网站时，它使我的整个页面错位了，所以我决定只给表单设置属性，所以我将整个表单放在一个<div>中，并给它一个名为starc的类。现在，我对CSS进行了以下更改以选择该类中的所有元素：
* .starc {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
但这并未应用于我的表单。有人能告诉我我的代码有什么问题吗？提前感谢。
英文:
i am creating a website in html. I have used a ready made html contact form in it. The css of which starts like below
<!-- language: lang-css -->
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
<!-- end snippet -->
when i inert it to my website its making my whole page misaligned, so i decided to give the properties to the form only, so i put whole form in a div and gave a class to it called starc. Now i did the following changes to css to select the whole elements in that class:
<!-- language: lang-css -->
* .starc {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
<!-- end snippet -->
but this is not being applied to my form. Can anyone please tell me what is wrong in my code. Thanks in advance
答案1
得分: 2
这是一个常见的做法，类似于流行的 normalize 这样的 CSS 重置。我强烈建议你这样做。然后，你可以删除你得到的这条规则：
* { ... }
因为这会重置页面上所有元素的外边距和内边距。盒模型大小确实很有用，但在 normalize 库中已经包含了。
至于你的问题，如果你想重置表单内所有元素的外边距，只需将星号替换为类名：
.starc * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
如果你只想重置表单中直接子元素的外边距，可以这样做：
.starc > * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
英文:
It is a common thing to use a css reset like the popular normalize. I would strongly suggest that you do it. I would then delete this rule that you got
* { ... }
Because that resets the margin and padding on all your elements on the page. The box sizing is good to have but that is covered in normalize lib.
To get to your question. If you want to reset the margins on all of your elements inside the form just reverse the asterix with the class
.starc * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
if you want for example only the direct children in the form then do this
.starc > * {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
答案2
得分: 1
星号（）选择页面上的所有元素。如果你想将其用于类名为starc的元素，请移除星号（）。
更多信息：https://www.w3schools.com/cssref/sel_all.asp
英文:
Asterisk(*) selects all the elements on the page. If you want to use it for the class starc, then remove asterisk (*).
More info: https://www.w3schools.com/cssref/sel_all.asp
答案3
得分: 1
如果你只想选择一个具有类名 "starc" 的元素，那么选择器将是：
.starc {
}
如果你使用 * .starc，那么与上面的相同，因为这个组合选择器选择嵌套在每个元素内部的具有类名 "starc" 的元素。所以 .starc 和 * .starc 没有区别。
另一方面，如果你想选择所有位于类名 "starc" 内部的元素，那么组合选择器将是 .starc *。
英文:
if you just want to select an element with class "starc" then the selector would be:
.starc {
}
If you use * .starc then its the same as above because the combinator selects elements with class "starc" which are nested inside every element. So .starc and * .starc makes no difference.
On the other hand if you want to select all elements that are inside the class "starc" then the combinator would be like .starc *.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论