CSS语法结构

selector {
    property1 : value;
    property2 : value;
}
如果包含多个属性,那么属性每个属性的结尾需要有一个分号。如果属性的值由多个单词构成,那么需要使用引号将多个单词包含起来。
 
选择器的种类:

  • 元素选择器 - 直接选择html元素: h1{} , a{}
  • 选择器分组 - 可以针对多种类型的标签设置相同的样式: h1,a{}
  • 通配符 - 针对所有的html标签设置样式.常用的做法是使用通配符来设置margin和padding为0px: *{}
  • 类选择器 - 通过.classname来指定一类样式,在html中通过class=classname来设置类样式: .class{}
  • 元素选择器+类选择器 - 选取指定了类选择器的特定类型的元素: a.class{}
  • 多类选择器 - 顾名思义,在html标签上应用多个类样式.在html中通过class="class1 class2"来指定,在样式表中的格式为: .class1.class2{}
  • id选择器 - 通过#id来为特定的属性来指定样式,只需为html标签设定id: #id{}
  • 属性选择器 - 对带有指定属性的html指定样式: [property] {}
  • 属性和值选择器 - 类似于属性选择器,并且附加一个限定条件即为特定的属性指定了一个值: [property = value] {}
  • 部分属性值选择器 - 类似与属性和值选择器, 这种情况下,只需属性的值包含有给定的值即可: [property~=value]{}
  • 后代选择器 - 选择某元素的后代(包括子元素, 子孙元素, 后代元素...): div p a{}, 选取div元素下面的p元素下面的a元素
  • 子元素选择器 - 选择某元素的子元素(只能选择直接的后代): p>strong{}
  • 相邻兄弟选择器 - 选择紧接着某元素后面的元素,且具有相同的父元素: h1+p{}, 与h1同级别并且紧接着出现在h1后面的p元素
  • 继承:子元素将会继承父元素上定义的样式

[学习笔记]CSS选择器的更多相关文章

  1. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  2. 前端学习笔记——CSS选择器

    学习css选择器之前我们先了解下css规则: CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 选择器通常是需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 1.id选 ...

  3. HTML 学习笔记 CSS(选择器3)

    CSS 属性选择器 属性选择器可以根据元素的额属性以及属性值来选择元素 例子1 如果 你希望把包含title的所有元素变成红色 *[title] {color:red} 例子2 与上面类似 可以只对有 ...

  4. HTML 学习笔记 CSS(选择器)

    CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...

  5. HTML 学习笔记 CSS(选择器4)

    CSS 后代选择器 后代选择器(descendant selector)又称为包含选择器.后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则 ...

  6. HTML 学习笔记 CSS(选择器2)

    CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式 该选择器可以单独使用 也可以和其他元素结合使用 提示 只要适当的 ...

  7. [CSS3] 学习笔记-CSS选择器

    CSS3中,选择器的分类很多,有元素选择器.类选择器.ID选择器.属性选择器.后代选择器.子元素选择器.相邻兄弟选择器. 1.最常见的选择器就是元素选择器,文档的元素就是最基本的选择器,例如,h1{} ...

  8. CSS学习笔记——CSS选择器样式总结

    <style type="text/css"> * { padding:0; margin:0; } .box h2 { //内边距左边的距离 padding-left ...

  9. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

随机推荐

  1. 回归JDK源代码(2)Enumeration<E>接口

    现在的Java程序员习惯使用Iterator<E>接口或者增强for循环来遍历集合.如果回到JDK 1.0,Enumeration接口则是遍历向量.哈希表的不二之选.本节就解读和翻译一下E ...

  2. ansible使用4-Playbook Roles and Include Statements

    task include --- # possibly saved as tasks/foo.yml - name: placeholder foo command: /bin/foo - name: ...

  3. 思科双出口+策略路由+NAT

    使用策略路由,从教育网出去的,在教育网接口进行nat转换 访问教育网资源平时走教育网,故障走电信 访问internat走电信线路,故障走教育网 服务器静态绑定教育网ip,不管电信.联通.教育网都走教育 ...

  4. webstrom使用

    主题 主题下载:http://color-themes.com/?view=index&page=1&order=popular&search=&layout=HTML ...

  5. SAP成都研究院Sunshine: 我的C4C实习感受和保研之路

    今天的文章来自SAP成都一位实习生,曾经和Jerry同在C4C成都开发团队一起工作过.在Sunshine最后一个工作日里,Jerry和Sunshine一起吃饭的时候,她曾经聊到接下来的保研打算和将来工 ...

  6. 类型构造器--高阶类型(构造器):Kind (type theory)--类型的元

    元类型(0阶类型):nullary type, data types 一元类型(一阶类型):unary  adj. [数] 一元的   二元类型: is the kind of a binary ty ...

  7. iis 发布失败原因总结

    3篇文章 1. https://www.cnblogs.com/adzhouyang/p/7357086.html 2..https://blog.csdn.net/li_ser/article/de ...

  8. 基于稀疏表示的图像超分辨率《Image Super-Resolution Via Sparse Representation》

    由于最近正在做图像超分辨重建方面的研究,有幸看到了杨建超老师和马毅老师等大牛于2010年发表的一篇关于图像超分辨率的经典论文<ImageSuper-Resolution Via Sparse R ...

  9. 前端jQuery之文档操作

    1.文档操作内部插入 A.append(B) 吧B添加到A的后面 A.appendTo(B) 吧A添加到B的后面 A.prepend(B) 吧B添加到A的前面 A.prependTo(B) 吧A添加到 ...

  10. Mac openssl 和curl源码编译

    1.先编译openssl, 下载源码后解压,终端进入源码目录,输入命令配置编译环境:./Configure darwin64-x86_64-cc 等待配置完成后,输入make  和make insta ...