标签选择器:
08-标签选择器我是段落
我是段落
我是段落
我是段落
-
-
-
我是段落
-
-
注意点: 特点:所有类型的 多深都能找到 只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input…) 格式: 标签名称{ 属性:值; }
效果图:
id选择器:
09-id选择器"identity1">迟到毁一生
"identity2">早退穷三代
"identity3">按时上下班
"identity4">必成高富帅
注意点; 特点;在js中id是具有唯一性的. #在前面添加 命名规则符合变量的规则 不能以html标签的名称作为id名 格式: #id名称{ 属性:值; }
类选择器:
10-类选择器"pp">迟到毁一生
"ppp">早退穷三代
"pppp">按时上下班
"ppppp">必成高富帅
"para1 para2">我是段落
"para1 para2">我是段落
注意点; 特点;类名具有重复性 .在css前面加 一个标签可以绑定多个类名 1.什么是类选择器? 作用: 根据指定的类名称找到对应的标签, 然后设置属性
格式: .类名{ 属性:值; }
效果:
类与id的混合使用:
"en">"UTF-8">11-id选择器和class选择器"colorR size30">第一段文字
"size30 line">第二段文字
"colorR line">第三段文字
注意点; 特点;区别:id在js中不能重复,类在js中可以重复 一个HTML标签只能绑定一个id名称。一个HTML标签可以绑定多个class名称 id以#开头,类以.开头.
效果:
后代选择器:
"en">"UTF-8">12-后代选择器我是段落
"identity" class="para">我是段落
我是段落
我是段落
我是段落
我是段落
特点:以空格隔开 找到的是指定的标签的最后一个标签设置颜色.
子元素选择器:
"en">"UTF-8">13-子元素选择器我是段落
"identity">我是段落
我是段落
我是段落
我是段落
注意点; 特点;找到的是特定的元素的最后一个标签设置颜色.子元素的儿子是>这里的就是所谓的儿子了.
效果图:
后代选择器和子元素选择器区别:
14-后代选择器和子元素选择器} 3.在企业开发中如何选择 如果想选中指定标签中的所有特定的标签, 那么就使用后代选择器 如果只想选中指定标签中的所有特定儿子标签, 那么就使用子元素选择器 -->
交集选择器:
"en">"UTF-8">15-交集选择器我是段落
我是段落
"para1" id="identity">我是段落
"para1">我是段落
我是段落
特点:标签与标签没有空格 像这样就是了.
并集选择器;
"en">"UTF-8">16-并集选择器 "ht">我是标题"para">我是段落
我是段落
我是段落
注意点;
特点;用逗号隔开,像这样
效果图:
兄弟选择器:通用兄弟选择器
"en">"UTF-8">17-兄弟选择器 我是标题 "#">我是超链接我是段落
我是段落
"#">我是超链接我是段落
我是标题我是段落
我是段落
我是段落
注意点; 特点;相邻兄弟选择器必须通过+连接 通用兄弟选择器用~. h1后面的第一个设置颜色。p后面的第一个设置颜色.
相邻兄弟选择器:
17-兄弟选择器 我是标题 "#">我是超链接我是段落
我是段落
"#">我是超链接我是段落
我是标题我是段落
我是段落
我是段落
特点;h1后面必须是p设置颜色