三个css选择器:id选择器#test1{ }、class选择器.test2{ }、标签选择器div{ }对三个div:<div>我是普通div</div>、<div id="test1">我是#test1</div>、<div class="test2">我是class</div>的影响，它们三个也是div标签，所以div影响了三个的背景，用id说明针对哪个div发挥作用，比较精细，而类控制的多一些，div的范围更大了，它影响这里的三个选择器

id选择器、class选择器、标签选择器、派生选择器div p{ }div下的p，派生类（根据元素之间的上下级关系）；

<style>
#test1{
width:100;
height:100px;
border: 1px solid red;
}
.test2{
width:100px;
height:100px;
border: 1px solid blue;
}
div{
width:100px;
height:100px;
background: pink;
margin:10px;
}
div p{
color:blue;
}
</style>
</head>

<body>
<div>我是普通div
<p>我是div下的p标签</p>
</div>
<p>我是独立p标签</p>
<div id="test1">我是#test1</div>
<div class="test2">我是class</div>
</body>

css优先级：多个选择器同时控制某个元素，而且设置了同一个css属性，控制的越精细优先级越高；

<style>
p{
color:red;
}
.test2{
color:bule;
}
#test1{
color:green;
}
div #test1{
color:pink;
}
</style>
</head>

<body>
<div>
<p id="test1" class="test2">css选择器</p>
</div>
</body>

css选择器及css优先级的更多相关文章

  1. Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

    Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...

  2. CSS选择器及CSS样式表

    前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...

  3. css基础-css选择器和css文本样式相关

    css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...

  4. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  5. CSS选择器整理以及优先级介绍

    一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...

  6. CSS选择器、CSS hack及CSS执行效率

    主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与 ...

  7. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  8. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

  9. （3）选择元素——（4）css选择器（CSS selectors）

    The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, ...

随机推荐

  1. imageNamed和imageWithContentsOfFile区别

    在 Apple 官方帮助文档提供了两个加载图片的方法 imageNamed , 其参数为图片的名字 imageWithContentsOfFile , 其参数是图片文件的路径 下面主要是说一下他们的区 ...

  2. java -- getOutputStream() has already been called for

    原文:https://my.oschina.net/zhongwenhao/blog/209653 原因:既调用了response.getOutputStream(),又调用了response.get ...

  3. 注解：【基于外键的】Hibernate双向1->1关联

    Person与Address关联:双向1->1,[基于外键的]. #主表不应该控制关联关系.(否则会导致生成额外的update语句,从而导致性能下降), #因此主表对应的实体中使用@OneToO ...

  4. ubuntu wifi连接不上或经常断网，重启就好

    问题1.知道wifi密码,驱动也有,可以点击连接,总是提示"连接断开,您现在处于离线状态". 1.打开终端"ctrl+alt+T" 2.输入: sudo vim ...

  5. java基础（四）

    一.面向对象的三个基本特征: 1.封装,将对象的实现细节隐藏起来,并通过公共接口暴露相关功能: 2.继承,代码复用的表现,当子类继承父类后,子类作为一种特殊的父类,直接获得父类的属性和方法: 3.多态 ...

  6. LeetCode——Best Time to Buy and Sell Stock I (股票买卖时机问题1)

    问题: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...

  7. JavaOO面向对象中的注意点（二）

    1.封装: 封装主要体现在:组装类 和 信息隐藏. a.信息隐藏:①访问修饰符:private ②方法的实现:get/set方法.run()方法-控制流程 b.组装类: ①类的定义:属性.构造.行为( ...

  8. 《DSP using MATLAB》示例Example5.16

    代码: x1 = [1,2,2,1]; x2 = [1,-1,-1,1]; x3 = conv(x1,x2); % N = 5 n1 = 0:1:length(x1)-1; n2 = 0:1:leng ...

  9. OSI七层模型及TCP/IP四层模型

    1)  OSI七层模型及TCP/IP四层模型 OSI七层模型:是国际标准化组织(ISO)制定的一个用于计算机或通信系统间互联的标准体系.它是一个七层的.抽象的模型,不仅包括一系列抽象的术语或概念,也包 ...

  10. js 封装设计cookie

    http://www.imooc.com/article/12700<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...