html的class和id
在CSS初級教程中我們僅僅考慮了HTML選擇符──以HTML標籤形式出現。
你當然可以用類選擇符class和標識選擇符id來定義自己的選擇符。
這樣做的好處是,依賴於class或者id,你可以不同地表現相同的HTML元素。
在CSS中,類選擇符在一個半形英文句點(.
)之前,而id則在半形英文井號(#
)之前。
看起來像這樣:
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
HTML與CSS的連線用屬性id
和class
。像這樣:
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
id和class不同之處在於,id用在唯一的元素上,而class則用在不止一個的元素上。
你也可以為一個指定的HTML元素應用選擇符,把HTML選擇符放置在前面就可以了,所以, p.jam { whatever }
會應用在有類“jam”的段落上。
相關文章
- Jquery獲取css中id和class樣式的動作-#id和.classjQueryCSS
- JS中class和id的區別JS
- HTML class 屬性HTML
- Typescript的interface、class和abstract classTypeScript
- self::class和static::class的區別
- iOS[super class]和[self class]iOS
- JavaScript 和 TypeScript 中的 classJavaScriptTypeScript
- generator class="" id詳解
- CSS 的class或id常用命名CSS
- scala class和object的區別Object
- Html5 aside標籤的用法和作用HTMLIDE
- Web前端——Class與ID的使用規範Web前端
- swift中Class和Struct的區別SwiftStruct
- Android APIs (Class Index - Android SDK)(一)AndroidAPIIndex
- Android APIs (Class Index - Android SDK)(二)AndroidAPIIndex
- CSS中的class與id區別及用法CSS
- Android thread class & threadloopAndroidthreadOOP
- 藍芽 HID class descriptor 分析藍芽
- Android:Unable to find explicit activity classAndroid
- typedef and struct inside class definition?StructIDE
- 深入理解Swift中的Class和StructSwiftStruct
- Class和ClassLoader的getResource方法對比
- Java之.class和.getClass()的區別Java
- C++中 struct 和 class 的區別C++Struct
- C++中struct 和 class的區別C++Struct
- HTML5 video視訊字幕的使用和製作HTMLIDE
- SCSS @mixin和class 區別CSS
- jQuery 新增和刪除classjQuery
- class dump使用方式和原理
- Html5和Html4的不同HTML
- HTML中關於class內容空格多類名的問題詳解HTML
- The Linux USB Video Class (UVC) driverLinuxIDE
- [譯] React 是如何區分 Class 和 Function 的 ?ReactFunction
- PHP中的 抽象類(abstract class)和 介面(interface)PHP抽象
- PHP 中的抽象類(abstract class)和介面(interface)PHP抽象
- HTML5和HTML4的區別HTML
- Swift中Class和Struct異同SwiftStruct
- iOS開發-#import、#include和@classiOSImport