使用CSS简单选择器选择HTML元素

白癜风康复宝典 https://m.39.net/pf/a_4575148.html
使用CSS简单选择器选择HTML元素介绍

超文本标记语言或HTML是设计用于在网页上显示的文档中使用的标准标记语言,它有助于定义网页上使用的各种元素并创建网页外观的基本布局。

示例HTML代码:

HTML本身看起来并不那么好,因为它只包含其元素的一些默认样式。为了改进样式,使用了CSS。

层叠样式表或CSS是一种样式表语言,用于描述网页中HTML元素的呈现方式。本质上,它用于为HTML元素添加更好的样式。

当使用CSS为HTML元素设置样式时,您需要一种方法来选择哪个元素具有哪个属性。

CSS选择器用于选择可以添加样式的元素。CSS选择器有很多不同的类型,但在本文中,我们只会处理简单的选择器。

简单选择器

简单选择器是选择带有用于声明它们的名称的HTML元素的方法。这些名称可能是:

标记名称

身份证名称

类名

通过标签名称选择HTML元素

HTML标记名称是在声明HTML元素时插入到HTML元素的开头和结尾处的标记语言片段。

如下代码片段所示,h1标签用于定义第一个标题,而p标签定义段落,其他标签用于定义其他元素。

h1HeaderOne/h1divh2HeaderTwo/h2pParagraph/pulliListitem1/liliListitem2/liliListitem3/liliListitem4/li/ul/div

选择这样的元素涉及编写标签名称,后跟包含样式的括号。

h1{color:red;}div{background-color:blue;}li{background-color:cyan;}

像这样选择元素很简单直接,但是这会为具有该标签名称的所有元素设置样式,当您定义具有特定标签的所有元素应具有的样式时,它非常有用,但是如果您只想为特定p元素设置不同的样式怎么办,或者您想为li(list-item)元素添加不同的样式。可以使用ID和类来为此类特定元素设置样式。

带有标签名称的上述样式的结果:

通过ID选择HTML元素

ID是特定HTML元素的唯一标识符。

ID是在声明HTML元素时分配的,ID可以是任何东西,但它们不能以数字开头,也不能包含空格。使用连字符(-)而不是空格

h1HeaderOne/h1divh2id="second-header"HeaderTwo/h2pParagraph/pulliid="first-item"Listitem1/liliListitem2/liliid="list-item-3"Listitem3/liliListitem4/li/ul/div

通过ID选择HTML元素时,#ID名称前的井号标签用于选择具有该ID名称的元素。

#header-2{background-color:black;color:red;}#first-item{background-color:green;padding:5px;color:white;}#list-item-3{margin:10px;color:red;}

建议不要为不同的元素赋予相同的ID名称,这是因为ID是唯一的。选择多个元素时,应改为使用类。

上述带有ID的样式的结果

选择带有类的HTML元素

类名是非唯一标识符,因为它们可以添加到多个元素中。

类也是在声明时分配的,它们不能以数字开头或包含空格。与ID不同,一个类可以分配给多个元素。

h1class="red-cursive"HeaderOne/h1divh2class="code-like"HeaderTwo/h2pclass="red-cursive"Paragraph/pulliclass="red-cursive"Listitem1/liliclass="red-cursive"Listitem2/liliListitem3/liliclass="code-like"Listitem4/li/ul/div

WhenselectingHTMLelementswiththeirclassname,adot.beforetheclassnameshowsthatthestylingisforallelementswiththatclassname.

.red-cursive{color:red;font-family:cursive;}.code-like{font-family:monospace;background-color:black;color:white;padding:5px;}

将此视为将各种元素添加到特定类,类中的所有元素都接收添加到该类的样式。

以上样式与类的结果:

附加功能通用选择器

通用选择器选择文档中的所有HTML元素。星号*用于调用通用选择器,一旦调用它就会影响网页中的每个元素。

*{background-color:black;color:yellow;}

当然不建议使用通用选择器进行样式设置,因为它会为您网页中的所有元素提供相同的样式,这可能会导致您的网页看起来很乏味

使用通用选择器进行上述样式的结果:

虽然有些属性最好用通用选择器定义。一个例子是font-family样式,它用于设置您想要在网页中使用的字体类型,将其添加为通用选择器中的样式可确保您网页中的所有元素都具有该特定字体。

另一个流行的用例是将所有元素的默认填充和边距设置为0。使用默认填充和边距有时会导致计算错误,大多数开发人员经常使用通用选择器将这些值设置为零。

将padding和margin设置为0的结果:

重置所有元素的默认内边距和边距有助于设置元素的样式,因为您可以设置外边距和内边距的样式,而不是添加到默认值。

组选择器

组选择器或选择器列表是一种选择多个元素并为它们分配相同样式的方法。

h1HeaderOne/h1divh2HeaderTwo/h2pid="paragraph"Paragraph/pulliListitem1/liliclass="marked-item"Listitem2/liliListitem3/liliclass="marked-item"Listitem4/li/ul/div

这涉及创建一个用逗号分隔的选择器列表,。

h1,#paragraph,.marked-item{background-color:gray;color:green;padding:10px;}

选择器列表中允许使用任何类型的选择器,它可以是标签、类或ID选择器。

上述样式与选择器列表的结果:!--图片:选择器列表的结果--

注意:如果选择器列表中有任何无效的选择器,则选择器列表中所有其他选择器的样式将被忽略。

结论

这就是所有简单的选择器,如果您想知道为什么它们被称为简单选择器,那可能是因为“不那么简单的选择器”,例如:

组合器

属性选择器

伪选择器

但是通过足够的练习和决心,你会发现这些“不那么简单”的CSS选择器实际上很简单。

设计网页确实具有挑战性,因此学习如何正确选择HTML元素可能是一项有用的技能。

如果您想了解更多关于CSS选择器的信息,请查看w3schools和MDN网络文档

非常感谢您阅读到此为止,如果您喜欢这篇文章,请务必留下一个赞并与朋友分享。

如果你没有,请让我放松一下,这是我的第一篇文章。另外,如果我犯了任何错误,请随时在评论部分进行更正。




转载请注明:http://www.aierlanlan.com/rzfs/6708.html

  • 上一篇文章:
  •   
  • 下一篇文章: 没有了