当前位置: 首页 > news >正文

css选择器的使用详解

-、css选择器的分类:

 

 

二、常用选择器详解:

  1、标签选择器:

  语法:

    标签名 {

      属性:属性值;

    }

  代码示例:

    h1 {

      color: #ccc;

      font-size: 28px;

    }

 

  2、类选择器:

   语法:

    .类名 {

      属性:属性值;

    }

   代码示例:

    .top {

      margin-top:25px;

    }

    <div class="top"></div>

  3、id选择器:

   语法:

    #ID名称 {

      属性:属性值;

    }

   代码示例:

   #top {

    padding-top:10px;

   }

   <div id="top"></div>

  注意:ID属性是唯一标识。

  4、伪类

   语法:

   元素:伪类 {

    属性:属性值;

   }

   代码示例:

   a:link {

    color:blue;

    }

  5、并集选择器:

   语法:

   标签名,.类名,#ID名称 {

    属性:属性值;

   }

   代码示例:

   p,.top,#title {

    color:red;

   }

  6、后代选择器:

   语法:

   p span {

     属性:属性值;

   }

三、通用选择器详解:

   语法:

  *{

   属性:属性值;

  }

四、高级选择器详解:

  1、子选择器:

    代码示例:

    #nav>li {

      padding-left: 20px;

    } 

 

  2、相邻同胞选择器:

    代码示例:

    h2+p {

      font-size: 1.4em;

    }

  3、属性选择器:

    代码示例:

    [id="header"] {

      background: url(branding-color.png) repeat-y left top;

    }

    a[rel="nofollow"] {

      padding-right: 20px;

    }

五、样式的优先级(权重):

  基本选择器之间:ID选择器〉类选择器〉标签选择器

  样式表之间:  行内样式〉内嵌样式〉外部样式

  css样式之间:  同一个选择器且两条相同的声明,后一条声明会覆盖前一条声明

转载于:https://www.cnblogs.com/john-sr/p/5692394.html

相关文章:

  • jQuery自动触发事件
  • windows bat脚本编写
  • Freemarker 浅析
  • [转] C#实现在Sql Server中存储和读取Word文件 (Not Correct Modified)
  • 终极解决方案:windows10开机黑屏,死机
  • C#打印条码BarTender SDK打印之路和离开之路(web平凡之路)
  • 规范化安全开发 KOA 手脚架
  • mysql开启/关闭 update delete 安全模式
  • Bzoj1007 水平可见直线
  • NGINX与APACHE工作模式的区别
  • thymeleaf th:attr标签
  • linux基础(7)-IO重定向
  • 【Xcode command line】命令行工具
  • sql 语句中 idlt ;SELECT * FROM t_blog WHERE idlt;#{id} ORDER BY id DESC LIMIT 1
  • I/O多路转接之select
  • 「前端」从UglifyJSPlugin强制开启css压缩探究webpack插件运行机制
  • 【跃迁之路】【669天】程序员高效学习方法论探索系列(实验阶段426-2018.12.13)...
  • Apache Spark Streaming 使用实例
  • Bootstrap JS插件Alert源码分析
  • canvas 高仿 Apple Watch 表盘
  • CentOS6 编译安装 redis-3.2.3
  • go append函数以及写入
  • IDEA常用插件整理
  • js算法-归并排序(merge_sort)
  • Kibana配置logstash,报表一体化
  • node-glob通配符
  • Rancher如何对接Ceph-RBD块存储
  • scrapy学习之路4(itemloder的使用)
  • Spring Cloud中负载均衡器概览
  • Web Storage相关
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 翻译:Hystrix - How To Use
  • 简析gRPC client 连接管理
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 用Visual Studio开发以太坊智能合约
  • $.ajax()方法详解
  • (03)光刻——半导体电路的绘制
  • (笔试题)合法字符串
  • (十八)三元表达式和列表解析
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • .NET 将混合了多个不同平台(Windows Mac Linux)的文件 目录的路径格式化成同一个平台下的路径
  • .net 微服务 服务保护 自动重试 Polly
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET版Word处理控件Aspose.words功能演示:在ASP.NET MVC中创建MS Word编辑器
  • .NET的微型Web框架 Nancy
  • .Net语言中的StringBuilder:入门到精通
  • .one4-V-XXXXXXXX勒索病毒数据怎么处理|数据解密恢复
  • @Mapper作用
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ 代码审计篇 ] 代码审计案例详解(一) SQL注入代码审计案例
  • [Android Pro] android 混淆文件project.properties和proguard-project.txt
  • [BZOJ4554][TJOI2016HEOI2016]游戏(匈牙利)
  • [C/C++]数据结构 栈和队列()
  • [codevs 1296] 营业额统计