CSS基本知识2-CSS选择
2024-09-22 15:38:56
选择就是CSS定义的第一部分,可以用面向对象的模式来理解,或者声明式的面向对象。
标准选择:
#.E
进阶选择:“,”分隔多个相同项,相当于类的实例。 如:#btn1,#btn2,.btn {...}
后代元素选择,相当于子类:
空格分隔: .nav p {...} #header .nav span {...}
子类在DOM中,是没有层级的。
子元素选择,只选一级, >
例如: nav > p {...}
相邻选择使用+,如h1 + p {margin-top:50px;}
属性选择器:按属性选择:[属性=值]
例如:input[type=text]
以上选择器,可以做And运算,就是结合起来使用
可见,CSS选择器,和Sql语言也很相似了。是声明式的。属性选择器还有更多的条件,但很少被使用(当然如果用来做应用,或许能派上大用场)
CSS媒体查询,也是类似Sql的查询,原理是一样一样的。
伪类
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 |
更多的伪类,其实原理就是从Dom中查找某些特定的节点以代替编程,比如找第一个子,最后一个子,交替查找子,找为空的等等,总之,CSS选择器,就是类Sql的一个声明式编程。
最新文章
- CDDA 源码解析
- R语言画云字图
- 开篇一文 php 和 js 默认参数
- [转]查看Flash Log输出
- 使用elasticsearch的关键技术点
- Android开发--Intent的应用
- asp.net GDI+绘制多个矩形
- JSP学习——语法
- ubuntu 64位android项目报错的解决方案,打开64位 Ubuntu 的32位支持功能
- virsh -c exs://ip/?no_verify=1 --readonly nodeinfo
- vimTAB宽度等设置
- POJ1251 Jungle Roads 【最小生成树Prim】
- [SignalR]一个简单的聊天室
- Vi 详细教程
- IO调度器原理介绍
- java.lang.Collections
- mysql史上最全的学习资料
- SQL Server 日志和代理的错误日志
- 如何写gdb命令脚本
- 带jdk15类似的jar配置