学习css选择器之前我们先了解下css规则:

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

选择器通常是需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

1、id选择器、class选择器、标签选择器

  1. /*id选择器*/
  2. /* #代表通过id选择器查找*/
  3.  
  4. #i1{
  5. height: 48px;
  6. background-color: red;
  7. }
  8.  
  9. /* class选择器 最常用 */
  10. /*. 代表通过class选择器查找*/
  11.  
  12. .div{
  13. height: 48px;
  14. background-color: aqua;
  15. }
  16.  
  17. /* 标签选择器 */
  18. /*标签名 代表通过标签选择器查找*/
  19.  
  20. span{
  21. color: red;
  22. background-color: blue;
  23. }

2、层级选择器(空格)

  1. /* 标签层级选择器 */
  2. span div{
  3. color: aqua;
  4. background-color: red;
  5. }
  6.  
  7. /* class 层级选择器*/
  8. .c1 div{
  9. background-color: #336699;
  10. height: 48px;
  11. }
  12.  
  13. /* id 层级选择器*/
  14. #i2 div{
  15. background-color: black;
  16. height: 48px;
  17. }

3、组合选择器(逗号)

  1. /* id组合选择器,z1 z2 z3 共用一套css样式*/
  2. #z1,#z2,#z3{
  3. background-color: chocolate;
  4. height: 48px;
  5. }
  6.  
  7. /* class组合选择器,z1 z2 z3 共用一套css样式*/
  8. .s1,.s2,.s3{
  9. background-color: darkmagenta;
  10. height:48px;
  11. }

4、属性选择器(中括号)

  1. /* 属性选择器,对选择到的标签再通过属性进行筛选,可以和层级选择器连用*/
  2. div[s='dsx']{
  3. background-color: darkred;
  4. height: 48px;
  5. }

前端学习笔记——CSS选择器的更多相关文章

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

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

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

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

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

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

  4. 前端学习笔记--CSS入门

    1.css概述: 2.css语法: 3.css添加方法: 用单独的文件存储css样式的优点: 优先级: h3得到的样式是内嵌样式覆盖了外部样式. 4.css选择器 标签选择器: 类别选择器: ID选择 ...

  5. 前端学习笔记 - Css初级篇

    有话先说:我是一只菜鸟,一只都是,从前是现在也是. CSS中的会计元素与行内元素 块级元素特性:占据一整行,总是重起一行并且后面的元素也必须另起一行显示.内联元素特性:和其他内联元素显示在同一行. 可 ...

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

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

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

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

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

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

  9. [学习笔记]CSS选择器

    CSS语法结构 selector {     property1 : value;     property2 : value; } 如果包含多个属性,那么属性每个属性的结尾需要有一个分号.如果属性的 ...

随机推荐

  1. fat32转ntfs ,Win7系统提示对于目标文件系统文件过大解决教程

    系统之家 发布时间:18-05-3117:56 很多Win7用户在复制较大的文件时,系统会弹出窗口提示“对于目标文件系统,文件XXX过大”,出现这种情况的原因是FAT32的文件系统不支持复制大于4g的 ...

  2. android SlidingDrawer

    SlidingDrawer把内容从屏幕上隐藏,允许用户拖动把手将内容显示到屏幕.SlidingDrawer可用于垂直或水平.它由两个视图组成的:handle,让用户拖拉的;content,连在hand ...

  3. css深入理解overflow

    1.基本属性 visible(默认值) 超出部分仍然正常显示 hidden 超出后隐藏 scroll 滚动条一致显示 auto 自适应 显示或隐藏滚动条 inherit overflow  =  ov ...

  4. spring注解开发:bean的作用域与懒加载

    1.bean的作用域 1.新建一个maven工程,添加如下依赖 <dependency> <groupId>org.springframework</groupId> ...

  5. HMTL5滑动块研究

    滑动块图片 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. springCloud的使用05-----路由网关(zuul)

    zuul的主要功能是路由转发和过滤,比如让所有/api-a/*的请求都转发到服务器a上,所有/api-b/*的请求都转发到服务器b上,zuul默认和ribbon结合实现了负载均衡的功能. 1 zuul ...

  7. Codeforce 464A. No to Palindromes!

    A. No to Palindromes! time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. MYSQL中常用的工具

    1.mysql(客户端链接工具):   -u :指定用户名   -p:指定密码   -h:指定服务器ip或者域名   -P(大写):指定端口  例子:mysql -u root -h 202.194. ...

  9. 2018-2-13-win10-UWP-九幽登录

    title author date CreateTime categories win10 UWP 九幽登录 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17: ...

  10. dotNET面试(三)

    1.简述 private. protected. public. internal 修饰符的访问权限.private : 私有成员, 在类的内部才可以访问 ,也就是类内部的函数等成员可以访问.prot ...