CSS - class选择器

  1. class属性
  2. 把class使用在CSS选择器上
  3. 多个class组合

  • 作者：KK

  • 发表日期：2016.1.26

class属性

和id选择器章节一样,这里也得向你补充一下HTML标签的知识点,所有标签都可以添加一个叫class的属性,但与ID有点不同的是,class是可以存在相同名称的,比如

<p class="newText">新闻1的内容新闻1的内容新闻1的内容新闻1的内容...</p>
<p class="newText">新闻2的内容新闻2的内容新闻2的内容新闻2的内容...</p>

把class使用在CSS选择器上

废话少说,直接看代码:

<body>
	<style type="text/css">
	.menu{color:red;}
	</style>
	<p>
		<!--这里是一个菜单-->
		<a class="menu" href="">首页</a>
		<a class="menu" href="">企业动态</a>
		<a class="menu" href="">产品列表</a>
		<a class="menu" href="">联系我们</a>
	</p>
	<br/><br/><br/>
	<p>昨天有个用户在<a href="http://tieba.baidu.com">百度贴吧</a>上发布了一则题为<a href="http://xxx...">招媳妇</a>的文章,企图通过网络招聘的方式得到配偶....</p>

	<p class="menu">嘿嘿,我的class也是menu哦!</p>
</body>

这里用.menu这个选择器来描述了"所有class=menu的标签"进行样式渲染,这样就使得菜单上的链接都成了红色,其它都不是红色.

如果不用.menu而是使用p a{color:red;}的话,那么下面那段文字里的a标签都会被上红色啦,所以class选择器其实是很好用的选择器,以后要多使用哦!

而另外不一定要是相同的标签才能用相同的class,最后还有个p标签也有个叫menu的class,所以它也成了红色文字咯

多个class组合

class属性的值可以用空格隔开变成多个值的,比如

<div class="item current"></div>

它的class的值是item current,但在我们一般讨论这些东西时都会当它是两个值,分别是item和current

而要用CSS对这个div上样式的话,选择器可以选其中一个class来写,比如

.item{样式...}

或者

.current{样式...}

都可以,但是还有一种办法,一般人我不告诉他那就是两个一起用,这样写:

.item.current{样式...}

其实class的值还可以写很多很多个,比如class="name age level item current",这样,然后CSS你选多少个组合都可以:.level.item.name{...}样式也是可以的哦,而且选择器不用按顺序写