ID选择器与Class类选择器区别

class和id选择器得区别：class选择器的值不是唯一的，我可以在多个标签共用一个class名
ID选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>ID选择器</title><!--ID选择器：要给添加样式标签添加一个id属性特点：id属性的值是唯一的css中id选择器以#号来定义--><style>#menu{background-color: #808080;/*背景颜色*/color: white;/*字体颜色*/font-size: 36px;/*字体大小*/width: 300px;font-family: "宋体";}#test{color: red;}</style></head><body><header><!--nav 导航标签--><nav id="menu"><ul><li>新闻资讯</li><li>娱乐天地</li><li>体育竞技</li><li>文化传媒</li></ul></nav></header><main><div id="test"><p>5万把共享雨伞不到一天全部“消失”</p><article><section><h2>国内新闻</h2><p>嫦娥七号顺利发射成功!</p><ction><section><h2>国际新闻</h2><p>国际油价大幅度上涨。每桶价格提高80美分。</p><ction></article></div></main></body>
</html>

Class选择器：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>类选择器</title><!--类选择器：给要添加样式得元素添加一个属性叫class在css中类选择器以"."开头class和id选择器得区别：class选择器的值不是唯一的，我可以在多个标签共用一个class名--><style>.test1{color: blue;font-weight: bold;}.test2{background-color: aquamarine;}.test3{background-color: red;}</style></head><body><ul ><li class="test1 test2">新闻</li><li>视频</li><li>体育</li><li>娱乐</li></ul><p class="test1 test3">中国突然作出这样得决定 澳大利亚懵了</p></body>
</html>

不足之处,请多指教!

ID选择器与Class类选择器区别相关推荐

CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
css中什么是伪类选择器？伪类选择器的简要介绍
本章给大家带来css中什么是伪类选择器?伪类选择器的简要介绍.让大家可以了解在css中伪类选择器的作用,css伪类选择器有哪些分类等知识.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. ...
CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)...
使用CSS3 选择器--笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
css中什么是伪类选择器？伪类选择器的简介
一.伪类选择器介绍伪类选择器(简称:伪类)通过冒号来定义,它定义了元素的状态,如点击按下,点击完成等,通过伪类可以为元素的状态修改样式. 伪类的功能和一般的DOM中的元素样式相似,但和一般的DOM中 ...
CSS复合选择器（后代选择器、子元素选择器、并集选择器、伪类选择器、:focus伪类选择器）
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的. 1. 后代选择器后代选择器又称为包含选择器作用:用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面,内层标签写在后面,中间 ...
第一章：第三课选择器-状态伪类选择器[四]
前三节我们学习了form元素的状态伪类选择器,今天我们再来学习一下复选框和单选框的选择器,以下选择器Opera支持最好! :default选择器.:checked选择器和:indeterminate选 ...
css选择器类型伪类选择器(详)
css选择器有八种: 1.标签选择器(如:body,div,p,ul,li). 2..类选择器(如:class="head",class="head_logo" ...
html中结构伪类选择器,结构伪类选择器
属性选择器元素的属性,我们都知道是什么.例如下面代码中type和value就是input元素的属性.属性选择器,顾名思义,就是通过属性来选择元素的一种方式. 属性选择器说明 E[attr^=&qu ...
CSS之关系选择器、属性选择器、伪类选择器
一.关系选择器后代选择器:只要是这个元素的后代,样式都会发生变化,div下面的所有h1标签样式都会改变关系选择器:子代选择器,只改变子标签的样式 <!DOCTYPE html> < ...
复合选择器-链接伪类选择器（HTML、CSS）
复合选择器-链接伪类选择器(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...

ID选择器与Class类选择器区别

ID选择器与Class类选择器区别相关推荐

最新文章

热门文章