当前位置:Gxlcms > css > css常用属性初总结第一弹:id和class选择器

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

时间:2021-07-01 10:21:17 帮助过:45人阅读

说到选择器大家都不陌生,估计用的最多的还是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层叠的问题了!今天的文章就到这里了,第一次写的可能语无伦次,可能是想到
什么就写什么,期待以后慢慢提高吧!

更多css常用属性初总结第一弹:id和class选择器相关文章请关注PHP中文网!

人气教程排行