选择就是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. SharePoint 2013 CSOM creat post in NewsFeed Access Denied

    现象 在用CSOM创建新闻源时候,报错:无访问权限 解决办法 value="true" 改为 value="false" <appSettings> ...

  2. AndroidTV版(乐视超3 X55)root,将自己的软件设置为开机自启、系统软件,卸载系统应用等问题总结

    最近开发android软件客户要安装在乐视TV上,而且要求是开机自启.我很天真的以为写一个广播接收类接收开机广播就可以了,可是根本不会,有的设备就是不可以接收到开机广播,于是各种百度搜索.大神们说是只 ...

  3. Linux命令操作

    该命令的功能是将给出的文件或目录拷贝到另一文件或目录中,就如同DOS下的copy命令一样,功能非常强大. 语法: cp [选项] 源文件或目录 目标文件或目录 说明:该命令把指定的源文件复制到目标文件 ...

  4. iOS开发之Bug--UITextField使用时文字向下偏移问题

    这个问题,在之前项目中偶然遇到过,但是bug不明显,也不知道具体是哪种重现方式重现的,所以一直暂时略过了,但是随着项目的系统的规模变大,代码量越多, 这个问题出现的越来越明显了. 于是就只能靠百度和g ...

  5. JDK1.3安装出现/lib/ld-linux.so.2: bad ELF interpreter: No such file or directory Done.

    今天是出道以来第一次安装JDK1.3,大学的时候接触的也已是JDK1.4,而且是在Red Hat Enterprise Linux Server release 6.6上,安装JDK1.3是由于软件组 ...

  6. 弹窗样式 idialog,purebox,artdialog4.1.2,jquery.alert.v1.2

    <script src="<?php echo $imgurl;?>/tools/media/js/jquery.iDialog.js"></scri ...

  7. LLVM 笔记(二)—— PHI node

    ilocker:关注 Android 安全(新手) QQ: 2597294287 什么是 PHI node? 所有 LLVM 指令都使用 SSA (Static Single Assignment,静 ...

  8. Android Studio failed to open by giving error “Files Locked” 解决方案

    windows 7 下的解决方案 导航至 android-studio 安装目录. (默认为C:\Program Files (x86)\Android\android-studio). 往上一层文件 ...

  9. 浅谈Service层为何要有接口

    被人随意问了一句,为何每个service层都要写一个接口呢,多麻烦~虽然想说点什么,但是又不知道从何说起,只好从新整理一下思绪. 情景1:在开源框架中有很多这种情况,就是某个功能支持用户自定义扩展.说 ...

  10. <a>链接的四个伪类顺序

    <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间. 为了给链接的4个状态应用样式,引入伪类的概念. 什么是伪类呢?简单点说,就是你没定义这个类, ...