博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS基本知识2-CSS选择
阅读量:6900 次
发布时间:2019-06-27

本文共 674 字,大约阅读时间需要 2 分钟。

选择就是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
向被激活的元素添加样式。 1
向拥有键盘输入焦点的元素添加样式。 2
当鼠标悬浮在元素上方时,向元素添加样式。 1
向未被访问的链接添加样式。 1
向已被访问的链接添加样式。 1
向元素的第一个子元素添加样式。 2
向带有指定 lang 属性的元素添加样式。

 

 更多的伪类,其实原理就是从Dom中查找某些特定的节点以代替编程,比如找第一个子,最后一个子,交替查找子,找为空的等等,总之,CSS选择器,就是类Sql的一个声明式编程。

 

转载地址:http://vesdl.baihongyu.com/

你可能感兴趣的文章
申请SSL证书怎样验证域名所有权
查看>>
麒麟开源堡垒机集中管控平台软件简介
查看>>
第十一单元练习
查看>>
从零开始的linux 第十六章
查看>>
EOS内存RAM是如何买卖的
查看>>
微服务架构中zuul的两种隔离机制实验
查看>>
电子合同将取代纸质合同吗?
查看>>
官宣丨“创客集结号”成功接入“广东省教育资源公共服务平台”!
查看>>
oracle教程之DML语句与undo
查看>>
mock.js与json schema
查看>>
转:Java properties | FileNotFoundException: properties (系统找不到指定的文件。)
查看>>
Cpp中流继承关系
查看>>
Angular CLI 使用教程指南参考
查看>>
[设计模式之禅读书笔记]001_设计模式六大原则(一):单一职责原则(Single Responsibility Principle)...
查看>>
CSAPP:cachelab(1)
查看>>
时间序列识别代码调试版本1
查看>>
Tomcat内存溢出解决办法
查看>>
Vue:v-model指令
查看>>
Software Engineering | Strategy pattern
查看>>
ios开发系列-准备工作
查看>>