CSS样式表中.,#,各有什么含义

html-css014

CSS样式表中.,#,各有什么含义,第1张

下面代码中:

#id_selector的意思是如果"id"等于id_selector时,这个标签的样式遵循 #id_selector后面的括号内的css样式,即“ID选择器”(本例为:边框为2像素的黑色实线)。

.class_selector的意思是如果"class"等于class_selector时,这个标签的样式遵循.class_selector后面括号内的css样式,即"类选择器"(本例为:背景色为绿色)。

下面代码中的第三个文本输入框,既有ID选择器又有类选择器,所有他有以上两种样式。

复制下面代码到你的<body>标签内,你就可以看到现象

<style type="text/css">

/*Css Code*/

#id_selector{ border: 2px solid #000000}

.class_selector{ background-color: green}

</style>

<!--HTML code-->

<input id="id_selector" type="text" value="这是ID选择器"><br/>

<input class="class_selector" type="text" value="这是类选择器">

<input id="id_selector" class="class_selector" type="text" value="两个样式都用了">

css中,. #区别:

1、.是使用class引用的,多个控件可以同时使用一个class,一个控件上也可以使用多个class,比如:

.tdRed{border:solid 1px red}

.tdBKBlue{background-color:blue}

<td class="tdRed" />

<td class="tdRed tdBKBule"/>

而ID是在一个页面中唯一的,class表示泛性的,id表示个性的,所有的按钮都是一个颜色的,

.normalButton{background-color:blueborder:solid 0px black}

对于提交按钮会要做的大一点。

2、#submit{width:100pxheight:100px}

按钮就是:

<input type="button" id="submit" class="normalButton" value="提交" />

普通的按钮就是:

<input type="button" id="abcdefg" class="normalButton" value="普通按钮" />

&表示在嵌套层次中回溯一层,即

&:before相当于.clearfix:before,&:after相当于.clearfix:after。

而:before和:after是CSS中的伪元素,表示在应用clearfix类的元素前和后插入指定内容。