今天主要说的是选择器的基础,

首先看,选择器的优先级:!important > 行间样式 > id选择器 > class 选择器 == 属性选择器 > 标签选择器 > 通配符

最基本选择器主要分为标签选择器,类选择器,ID选择器和通配选择器。

一、css的权重:在css中,哪个选择器的权重高,就走谁的样式

1.最高级别!important

2.行内式 1000

3.ID选择器 100

4.类选择器、伪类、属性选择器 10

5.元素选择器、伪元素 1

6.其它为0

他的种类又分为

二、Css选择器的种类

标签、权重是0001,

类class、权重是0010 相当于255个标签选择器

Id、权重是0100相当于255个类

*通配符、代表所有的标签 权重是0000

后代选择器、(.a p )累加0011.

子代选择器、(.a>p)权重是0011

交集选择器 (.a#as)

并集选择器:(.a,.b)

css选择器的两大特性

Css选择器的两大特性:1.   继承性-所有跟文本字体有关的属性都会被子元素继承,且权重为0000,

2.   层叠性—就是解决选择器权重冲突的一种能力,就是看那个选择器的权重大,谁的权重大听谁的,

css的选择器及它的种类特性?的更多相关文章

  1. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  2. CSS概述<选择器总结>

    概述:CSS是指层叠样式表,他是定义如何显示HTML元素,样式表通常存储在样式表中,通常存储在.css文件中,下面对css的选择器进行总结,便大家夯实基础! 1 语法规范: 每个样式规则有两个部分:选 ...

  3. CSS基础选择器(选择器的优先级),CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成,盒模型-block,盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  4. CSS常用选择器的认识

    ---恢复内容开始--- 前言:在CSS中选择器的种类有很多很多,但是在实际的工作中,我们经常会用到的分为两大类:基础选择器和复合选择器这两个大类,学习选择器的目的就是为了在复杂的页面中能够快速定位到 ...

  5. CSS 1. 选择器

    1.css的介绍 CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  6. css 元素选择器实例

    一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式.本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下. [标签选择器] 一个完整 ...

  7. python 46 css组合选择器 及优先级 、属性选择器

    一:css组合选择器 特性:每个选择器位可以为任意基本选择器或选择器组合 选择器分为以下几类: 群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器,多类名选择器 1.群组选择器:    d ...

  8. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  9. CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)

    一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...

随机推荐

  1. 分析CPU使用率不断增加的原因

    工程中发现引起的问题: 结合别的朋友的意见,我的优化思路是: 1.排查是否内存泄漏 经过反复查询代码,未发现有内存泄漏(可以自己百度搜索C#内存泄漏的原因).可以通过任务管理器分析是否有内存泄漏,打开 ...

  2. 公子奇带你一步一步了解Java8中Lambda表达式

    在上一篇<公子奇带你一步一步了解Java8中行为参数化>中,我们演示到最后将匿名实现简写为 (Police police) -> "浙江".equals(poli ...

  3. JAVA字节码文件之结构

    开发工具:IEDA.JDK1.8.WinHex 一.字节码文件结构 源代码 package com.jalja.java.bytecode; /** * @Auther: XL * @Date: 20 ...

  4. 公子奇带你进入Java8流的世界(一)

    在说流之前,我们先来看看集合,为什么呢?作为Java8中的新成员,它和集合有很多相似之处,同时它们也是可以互相转化的.集合不仅仅是Java语言,任何一门高级开发语言都有集合的概念,集合顾名思义,就是很 ...

  5. 「CH2601」 电路维修 解题报告

    CH2601 电路维修 描述 Ha'nyu是来自异世界的魔女,她在漫无目的地四处漂流的时候,遇到了善良的少女Rika,从而被收留在地球上.Rika的家里有一辆飞行车.有一天飞行车的电路板突然出现了故障 ...

  6. Python 植物大战僵尸代码实现: 图片加载和显示切换

    游戏介绍以前很火的植物大战僵尸游戏, 本想在网上找个python版本游戏学习下,无奈没有发现比较完整的,那就自己来写一个把.图片资源是从github上下载的,因为图片资源有限,只能实现几种植物和僵尸. ...

  7. 微信生成二维码 PHP

    <?php /** * Created by PhpStorm. * User: liyiming * Date: 2019/8/8 * Time: 14:23 */ # 生成二维码 class ...

  8. 最全面的css布局

    1.定位 定位的概念就是它允许你定义一个元素相对于其他正常元素的位置,它应该出现在哪里,这里的其他元素可以是父元素,另一个元素甚至是浏览器窗口本身.还有就是浮动了,其实浮动并不完全算是定位,它的特性非 ...

  9. 学以致用,react学习前奏准备阶段

    ReactJS:支持React开发,提供JSX代码提示,高亮显示,ReactJS官方介绍 1.cdm→  componentDidMount: fn() { ... }   cdm 2.cdup→  ...

  10. Akka Java 中文文档

    Akka Java 中文文档 Introduction What is Akka? | 什么是Akka? Why Akka? | 为什么选择Akka? Getting Started | Akka入门 ...