前端学习_01.css选择器
来源:互联网 发布:linux大作业 编辑:程序博客网 时间:2024/06/13 03:13
CSS 选择器
CSS 选择器
- a)基本选择器
i.通配符选择器(1)*{property:value;}
ii.标签选择器(1)标签名{property:value;}
iii.id选择器(1)#ID名{property:value;}
iv.class选择器(1).CLASS名{property:value;}
- b)复杂选择器
i.后代选择器(以空格分隔)(1)E F{property:value;}
ii.交集选择器(直接相连)
(2).container .center{width: 1024px;height: 100%;}(1)EF{property:value;}
iii.并集选择器/群组选择器(以逗号分隔)
(2)div.desc {text-align: center;}(1)E,F,G{property:value;}
(2).box1, .box2, .box3 {width: 200px;height: 250px;}
四大基本选择器
- a)通配符选择器
i.一般用于取消全局的默认样式中的margin和padding:*{margin: 0;padding: 0;}
ii.当然你在练习的时候使用这个没问题,但是不建议在生产环境中使用,会给浏览器添加不必要的负担。推荐使用并集选择器的实现。 - b)标签选择器
i.优点:在使用标签选择器之前,不需要修改具体的文档标记,标签选择器也可以正常选择和添加样式。
ii.缺点:对页面多个标签中某一的部分的选择和添加样式比较困难。 - c)id选择器
在使用id选择器之前,需要修改具体的文档标记,以便id选择器正常工作。
i.优点:id唯一,可以轻松对页面标有特定id的部分进行选择和添加样式。
ii.缺点:id唯一,不能重复使用,id一般在js中使用。(css也可以用id来选择,但不建议) - d)class选择器
在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常工作。
i.优点:可以为多个元素指定同一个class,也可以为一个元素指定多个class。
三大复杂选择器
将基本选择器以几种方式灵活组合起来,就有了5种或6种复杂选择器了,一般常用的就是这三种后代/交集/并集选择器。
- a)复杂选择器的优势
i.ID选择器严格且只能出现一次,但是ID选择器组合派生的复杂选择器可以被多次复用。
ii.标签选择器对于多个同样标签中的几个标签的选中和添加样式比较困难,但是复杂选择器可以更好的定位。 - b)后代选择器
后代选择器匹配所有指定元素的后代元素
i.E F{property:value;},其中E 为指定元素,F为后代元素
ii.当li、td、dd 等大量连续出现且样式相同或者相似的标签,就应用后代选择器 - c)并集选择器
i.E,F,G{property:value;}
ii.可以用于取消全局的默认样式中的margin和padding(将页面中你使用的所有标签并列)
阅读全文
0 0
- 前端学习_01.css选择器
- 前端基础学习之CSS选择器
- 前端学习笔记3:CSS简介及CSS选择器
- 【Web 前端】CSS选择器
- 前端 - css - 选择器
- 前端-css选择器
- 前端学习之路-css选择器和布局
- 从零开始前端学习[12]:css样式中的高级选择器
- web前端之css选择器
- 【WEB前端】CSS常用选择器
- 网页前端CSS之选择器
- 前端基础-02-CSS选择器
- css 选择器 学习
- css学习之选择器
- CSS学习笔记----选择器
- flex css选择器学习
- css基础学习-选择器
- css学习 选择器
- 静态、动态代理实例
- RedHat 安装RabbitMQ
- 019day(字符串库函数的学习)
- 在线扩容datanode脚本(用fabric)
- MATLAB与C++汇编中调试.cpp的方法
- 前端学习_01.css选择器
- ionic -bootstrap 问题
- java项目中连接MySql
- Find The Multiple(搜索)
- 【图论】[luoguP1364]医院设置
- 多态成员的特点
- 三种距离.A*算法解八数码问题
- 信息学奥赛一本通(C++版) 第二部分 基础算法 第四章 递归算法
- hbase rest api的使用