简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

CSS ID选择器与CLASS选择器_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 11:38:12
Original
1441 people have browsed it

  在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。        
  属性选择器可以根据元素的属性及属性值来选择元素。

  三种基本的选择器类型：标签名选择器、类选择器、ID选择器

具体语法如下：

 1、标签名选择器，如：

html {color:black;}h1 {color:blue;}h2 {color:silver;}
Copy after login
即直接使用HTML标签作为选择器。

2、类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。
要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

       demo：

.important {font-weight:bold;}.warning {font-style:italic;}.important.warning {background:silver;}
Copy after login
class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class 中同时包含 important 和 warning 的所有元素还有一个银色的背景。

3、ID选择器


小结：

那么类选择器与ID选择器有啥区别呢？

ID 有高优先级、唯一性的特点，特指「个体」。
相对于 ID，class 的优先级比较适中，特指「特定群体」。
Class 的使用需要参考面向对象的抽象概念，把共有的属性抽象出来。

ID是先找到结构/内容，再给它定义样式；
Class是先定义好一种样式，再套给多个结构/内容。

Related labels：
CSS ID选择器与CLASS选择器
source：php.cn
Previous article：商城导航代码_html/css_WEB-ITnose Next article：火狐表格样式显示不正常_html/css_WEB-ITnose
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Use JS to control playback quality Is there any way to control the playback quality of a video using Javascript? More precise...
From 2024-04-04 00:21:55
0
1
384
How to use CSS selectors to target div elements containing specific attributes or tags? I'm working on a POS system that generates a website. Most of the code is proprietary so I...
From 2024-04-03 22:25:59
0
1
277
SVG - ugly edges with multiple gradient fills I want to create a JavaScript color picker. I'm using SVG to create a color triangle like ...
From 2024-04-01 20:00:27
0
1
289
How to check width property of CSS class selector? An example is .label{} Here is my comment on the css code, where I chose a width of 270 for the .label: If you in...
From 2024-04-01 17:45:11
0
1
338
Flex spacing broken when trying to overflow HTML <pre><code> tag instead of wrapping I apply CSS to the precode selector in order to make styled code blocks like you would see...
From 2024-04-01 12:22:06
0
1
296
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！