选择就是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的一个声明式编程。

CSS基本知识2-CSS选择的更多相关文章

  1. 【CSS】 CSS基础知识 属性和选择

    css基础知识 html的基本标签都是千篇一律的,为了能够个性化外观,就需要进行样式的调整,而css就是专门用来维护,管理样式的一种格式.在html中定义css有三种方法 1. 为标签添加style属 ...

  2. DIV+CSS学习笔记(CSS)

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  3. CSS基本知识和选择器

    一.CSS基本知识 内联式css样式,直接写在现有的HTML标签中 内联式css样式表就是把css代码直接写在现有的HTML标签中,如下面代码: <p style="color:red ...

  4. css基本知识

    WANGJUN59451   css基本知识 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HT ...

  5. CSS 基本知识

    1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的 ...

  6. CSS基础知识01

    一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法 加粗:font-weight:bold;             正常用:norma ...

  7. CSS入门知识汇总

    1.CSS认识 在谈论CSS的概念之前,我们先说一说web标准的目的——其在于创建一个统一的用于web表现层的技术标准,以便通过不同浏览器或终端设备向最终用户展示信息内容.一个网页的呈现是由三部分组成 ...

  8. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  9. 关于CSS的知识

    这两天在学习关于HTML的知识,今天学习到CSS的知识,将自己所收获的知识点归纳一下: 首先, CSS声明学习:                 1.在head标签中使用style标签声明:      ...

  10. CSS基础知识解析

    一.基础知识 1.1 CSS组成 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝 ...

随机推荐

  1. position: fixed用在iframe里面失效了

    iframe真是各种坑啊,,,可是找不到别的代替 $(parent.window).scroll(function(){ $('固定元素').css({ top : $(parent.window). ...

  2. 复选框(checkox)全选、全不选、反选、获得选中项值的用例

    HTML部分: <div class="all"> <ul> <li><input type="checkbox" v ...

  3. CRM基于.NET的增删改查

    一.准备工作: 1.添加 microsoft.crm.sdk.proxy.dll和microsoft.xrm.sdk.dll 引用到项目中!并引用以下using! using Microsoft.Xr ...

  4. JAVA 设计模式 桥接模式

    用途 桥接模式 (Bridge) 将抽象部分与实现部分分离,使它们都可以独立的变化. 桥接模式是一种结构式模式. 结构

  5. JSPatch使用小记

    hotfix的作用众所周知,Android和iOS都有各自的技术,但是相比Android的当天发布来说(如果你们的项目不需要灰度),iOS热更新的意义更加重大.因为iOS审核周期长不说,而且运气不好会 ...

  6. CoreGraphics-线段常见属性及渲染模式介绍

    线段常见属性: 1.线宽 2.线头样式 3.接头样式 4.颜色(包括描边颜色和填充颜色) override func draw(_ rect: CGRect) { // 获取图形上下文对象 let c ...

  7. Linux0.11内核--引导程序分析

    1.简介 本文主要介绍三个文件bootsect.s.setup.s.head.s,主要是做了些从软盘加载内核和设置32位保护模式的操作. 2.程序分析 当PC电源打开后,BIOS自检后将bootsec ...

  8. xp系统下硬盘安装centos6.5

    引言: 电脑系统是Windows XP,电脑没有光驱.手头没有U盘.没有移动硬盘.电脑主板不支持U盘启动,在这种情况下想安装CentOS 6.0,有木有办法? 答案:有办法,请看下面教程! 必备工具: ...

  9. IOS开发基础知识--碎片13

    1:运行程序报the file couldn't be opened because you don't have permission to view it 解决办法:项目—>targets- ...

  10. Spring 中classPath:用法

    参考文章地址: http://hi.baidu.com/huahua035/item/ac8a27a994b55bad29ce9d39 http://blog.csdn.net/lushuaiyin/ ...