css常用属性总结第二弹:id选择器

2019-10-21 02:52 来源:未知

承接上一篇class选择器,这一篇我们来说说css的id选择器。

css常用属性初总结第一弹:id和class选择器,css选择器

前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉!

说到选择器大家都不陌生,估计用的最多的还是id选择器和类选择器,至于其他的选择器,今天在这里我避而不谈。

类选择器:将html元素取一个响亮的名字,用class来标记,就可以使用类选择器了,如<p class="p1">这是段落1</p>,这里我将p元素class设置
为"p1",然后再写css样式就可以直接使用了,

举个栗子:

<style type="text/css">
p.p1{color:red;}
</style>

</head>
<body>
<p class="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

运行上一段代码,就将类名为p1的p元素的文字颜色设置为红色了,是不是很简单,说明一下,非p元素的类名为p1时没有效果哦,要想所有
的class类名为p1的元素有效果,则需要把前面的结构元素名去掉。现在的项目都是敏捷开发,所以用类名就得小心了,刚开始大家经常抱怨的
就是类名冲突,结果就是样式相互冲突了,所以我们项目上定下了约定,以页面功能来命名类名,从而避免类名冲突。

另外要提一下的就是多类名:如上面的

<p class="p1 center">
This paragraph will also be center-aligned.
</p>

一个class值中是可以有一个此列表了,各个词之间用空格来分开。然后写样式就一个个写就ok了,这里估计会有人会问:如果多个类之间有
相同的css样式会出现什么情况!这里就要阅读后面的有关css层叠的问题了!今天的文章就到这里了,第一次写的可能语无伦次,可能是想到
什么就写什么,期待以后慢慢提高吧!

前言:这是我第二次写博客,记录自己所学的点点滴滴,希望大家一起共勉! 说到选择...

id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和class
选择器类似,基本用法如下:

#element{属性名:属性值}

我们来看一个列子吧:
<html>
<head>
<style type="text/css">
#p1{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

在浏览器里运行上面一段上面一段代码,就可以看到p元素的文字为加粗红色,看到了吧,id选择器用法就是这么简单。
不过我们知道,可以为多个元素指定相同的类名,但是对于id名,html文档中只能出现一个id名,所以我们得记住:保持id的唯一性。

不过有的人会说,如果一个html文档中出现了多个相同的id名会出现什么情况。实际上,浏览器通常不检查html中id的唯一性,这就意味着如果你在
html文档中设置了多个相同id属性值的元素,就可能为这些元素应用相同的样式.
如:

<html>
<head>
<style type="text/css">
#same{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="same">
This paragraph will also be center-aligned.
</p>
<h4 id="same">This is a title</h4>
</body>
</html>

结果p元素和h4元素中的文字也是红色粗体,证明有相同id的元素都会有该样式,但这种用法是错误的,如果只是想让多个元素拥有相同样式,
请记住使用class属性!这里顺便提一下,多个相同id名会导致编写dom脚本变得困难。我们后面会提到的。
好了,今天的文章就到这里了,谢谢大家!

TAG标签:
版权声明:本文由澳门新葡亰娱乐在线发布于葡亰_棋牌,转载请注明出处:css常用属性总结第二弹:id选择器