css中 可以同时调用多个类吗?

html-css021

css中 可以同时调用多个类吗?,第1张

css的类是可以被一个元素同时使用多个的,也就说某个元素可以同时使用多个class样式,但是如果发生了样式冲突会出现后者覆盖前者的现象。

工具原料:编辑器、浏览器

1、一个元素可以同使用多个class样式类,写法一般是class=“test1 test2”中间使用空格隔开即可,代码如下:

<body>

<style type="text/css">

.div1{

width: 200px

height: 200px

}

.div2{

background: #ccc

}

</style>

<div class="div1 div2"></div>

</body>

2、以上代码div同时使用了div1类和div2类的样式,最终的效果是一个宽高200像素背景是灰色的div,运行的结构如下:

我这里本地测试过,这两种写法都是可以的,我这里测试过div及input的四种写法,为了效果明显,我将font-size设置为了44px.

首先,第一种写法,是div,id="searchStr",然后给的是html,样式是color为red

然后,第二种写法,是下面的多个属性,是css({}),里面传入一个json对象,用法是不错的,但是有些属性,需要变成驼峰式的写法,比如font-size要换成fontSize,background-color等换成backgroundColor等。但是这种写法,我这里是支持的。

第三种写法,是input配合样式,我觉得这里你可能需要变更一下写法,需要把html换成val方法,因为input元素没有html,只有value属性,对应jquery中就是val方法。

如果继续使用html方法的话,输入框里没有文字,但是dom元素中是插入的

换成第四种,多个属性的话,使用val方法,也是有效果的,

如果继续使用html方法,可以看到虽然输入框里没有文字,但是输入框的大小明显被文字撑开了,所以设置的样式是有效果的。

最后,我这里使用的jquer是百度的压缩2.1.1版本,首先检查一下你使用的jquery的版本,然后去jQuery官方网站上确认一下该版本是否支持这种写法了,一般来讲应该支持的。