资讯专栏INFORMATION COLUMN

第十二课 CSS基本选择器 css学习2

khs1994 / 3000人阅读

摘要:可以是数字,关键词或公式十一目标伪类选择器器目标伪类选择器选择器可用于选取当前活动的目标元素

基础选择器
一、标签选择器(元素选择器)
标签选择器是指用HTML标签名称作为选择器,按标签名称分类
语法:标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

二、类选择器
1、类选择器使用"."(英文)+类名进行选择

三、css命名规范
1、长名称或词组可以使用中横线来为选择器命名
2、不建议使用“_”下划线来命名Css选择器
3、不要用纯数字或中文命名

命名规范是我们通俗约定。见名知意

四、多类名选择器
语法:class="类名1 类名2"

五、id选择器
1、id选择器使用"#"+id名称 即 #id

六、类选择器与id选择器的区别
1、类选择器是可以重复多次使用的
2、id选择器 一般是唯一的,只允许使用一次

七、通配符选择器
通配符选择器用“*”表示,它是所有选择器中作用范围最广的,
能匹配页面中的所有元素。要谨慎使用。


伪类选择器用于向某些选择器添加特殊效果

八、链接伪类选择器(主要针对于a标签)
1、:link 未访问的链接 如:a:link{}
2、:visited 已访问过链接 如: a:visited{}
3、:hover 鼠标移动到链接上 如:a:hover{}
4、:active 选定的链接,当我们点击不松开 如: a:active{}
注:书写顺序按照 link visited hover active l v h a

九、链接伪类选择器简写
在一般开发中常用到 link 与hover 伪类
实际开发工作中,我们简写就好了

十、结构(位置)伪类选择器(CSS3)
1、:first-child 选取父元素的首个元素的制定选择器
2、:last-child 选取父元素的最后一个元素的制定选择器
3、:nth-child(n) 选取属于父元素的第N个子元素, 如:n=odd奇数 n=even偶数 n=2n 偶数 n=2n+1奇数
4、:nth-last-child(n) 选取父元素的第n个子元素,
不论与元素类型,从最后一个子元素开始计数。
n 可以是数字,关键词或公式

十一、目标伪类选择器器
:target目标伪类选择器 选择器可用于选取当前活动的目标元素

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1183.html

相关文章

  • TRY REGEX:正则表达式交互式入门教程 翻译&解答

    摘要:写一个正则表达式来测试变量中是否包含字符串。用函数给出不使用字符,但和等价的正则表达式。第十四课标志全局匹配标志第二个常用的标志是全局匹配标志,用字母表示。写出一个正则表达式来检验合法性。非捕获组的主要用途是给一个组赋予量词。 TRY REGEX 是一个交互式的正则表达式学习项目项目地址:https://github.com/callumacra...在线地址:http://tryre...

    李义 评论0 收藏0
  • JQuery快速使用之元素查找与操作

    摘要:作者心叶时间以下是快速使用的查阅手册,没有个人理解的地方还请原谅,毕竟初衷只是方便开发时忘了可以快速查阅。第六步以及以及,拥有回调函数。回调函数有两个参数被选元素列表中当前元素的下标,以及原始旧的值。 作者:心叶时间:2018-04-22 00:41 以下是Jquery快速使用的查阅手册,没有个人理解的地方还请原谅,毕竟初衷只是方便开发时忘了可以快速查阅。 第一步:sizzle选择器 ...

    OBKoro1 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    iOS122 评论0 收藏0
  • DIV+CSS学习笔记总结篇

    摘要:每个列表项始于标签。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。标签的属性应当与相关元素的属性相同。姓名性别姓名性别单元格标签可以定义表格中的一个单元格,表示一个单元格。 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求...

    HackerShell 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<