HTML的id选择器类选择器

一、问题：我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式，这对于我们个性化定制产生了阻碍，因此我们便引出了id选择器，来进行特别指定进行配置样式

二、id选择器

1.定义：根据指定的id名称找到对应的标签，然后设置属性

2.格式：

#id名称｛

    属性：值；

｝

3.例如：

<style>p{color: rgb(255,45,45);}#label1{color:black;}#label2{color: #37fa1e;}#label3{color: blue;}#label4{color:green;}</style></head><body><b id="label1"></b><p id="label2">迟到毁一生</p><p id="label3">早退穷三代</p><p id="label4">按时上下班</p><p id="label5">必成高富帅</p>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

4.注意：

（1）每个HTML标签中都有一个属性叫做id ,也就是说每个标签都可以设置id

（2）在同一个界面中id名称是不可以重复的

（3）在编写id选择器的时候一定要在id名称前面加上#

（4）id名称是有规范的：只能由字母、数字、下划线组成的，且不能以数字开头；id名称不能以HTML标签名来命名

（5）在企业开发中一般情况下如果仅仅是为了设置样式，我们一般不会使用id，因为在前端开发中id是留给js使用的，可以使用类选择器

三、类选择器

1.定义：根据指定的类名称找到对应的标签，然后进行设置属性

2.格式：

（1）写在HTML中的与id的格式是一致的

（2）在style中：

.类名｛

    属性：值；

｝

3.例子：

    <style>.pp2{color: aqua;}.pp3{color:blue;}</style></head><body><p class="pp2">迟到毁一生</p><p class="pp3">早退穷三代</p><p class="pp2">按时上下班</p><p class="pp2">必成高富帅</p></body>web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

4.注意点：

（1）每个HTML标签中都有一个属性叫做class ,也就是说每个标签都可以设置class

（2）在同一个界面中class名称是可以重复的

（3）在编写class选择器的时候一定要在class名称前面加上.

（4）class名称是有规范的：只能由字母、数字、下划线组成的，且不能以数字开头；class名称不能以HTML标签名来命名(和id的命名规范一样)

（5）使用类选择器就是为了设置样式的

（6）在HTML中每个标签可以同时绑定多个类名

格式：

<标签名称 class=“class名1 class名2 class名3”>

例如：

web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）.ppp{font-size: 50px;}.pppp{color:red;}.ppppp{font-family: 微软雅黑;}.......(省略中间的)<p class="ppp pppp ppppp">实验一下</p>

多个类名控制不同的属性。

HTML的id选择器类选择器相关推荐

基础选择器-类选择器
1.基础选择器-类选择器(开发最常用):如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器. 语法: 结构需要用class属性来调用,在CSS中,类选择器以一个.号表示,后面紧跟我 ...
html选择器_HTML的id选择器类选择器
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式二.id选择器 1. ...
id jquery选择器开头_HTML的id选择器类选择器
一.问题:我们前面讲了标签选择器有一个缺陷就是它不加选择的把所有相同的标签全都变成统一样式,这对于我们个性化定制产生了阻碍,因此我们便引出了id选择器,来进行特别指定进行配置样式二.id选择器 1. ...
class选择器 (类选择器)
class 类型选择器的格式是: .class 属性值{ 属性:值; } HTML代码: <div class="cla ...
css 选择器（标签选择器、类选择器、层级选择器、id选择器、组选择器、伪类选择器、通配符选择器）
css 选择器的定义 css 选择器是用来选择标签的,选出来以后给标签加样式. css 选择器的种类标签选择器类选择器层级选择器(后代选择器) id选择器组选择器伪类选择器通配符选择器标 ...
html:(26):类选择器和id选择器
类选择器类选择器在css样式编码中是最常用到的,如右侧代码编辑器中的代码:可以实现为"胆小如鼠"."勇气"字体设置为红色. 语法: .类选器名称{css样式代 ...
类选择器和ID选择器
什么是选择器? 每一条css样式声明(定义)由两部分组成,形式如下: 选择器{样式;} 在{}之前的部分就是"选择器","选择器"指明了{}中的"样式 ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
6—CSS基础选择器（标签选择器、类选择器、id选择器）
css简介 css是层叠样式表的简称,css主要用于设置html的文本内容.图像的外形以及版式的布局和外观显示样式.css让我们的网页更加丰富多彩,布局更加灵活自如. css语法规范 css规则由两个 ...

HTML的id选择器类选择器

HTML的id选择器类选择器相关推荐

最新文章

热门文章