您当前的位置: 首页 >  css3

暂无认证

  • 4浏览

    0关注

    92582博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

五千字长文-css3选择器基础最详解(讲述其核心特点)(下次更新的是选择器高级)

发布时间:2020-10-29 14:58:58 ,浏览量:4

标签选择器:

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设置颜色

关注
打赏
1653961664
查看更多评论
立即登录/注册

微信扫码登录

0.5176s