css选择器及css优先级
三个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优先级的更多相关文章
- Unit02： CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明
Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html&g ...
- CSS选择器及CSS样式表
前言 牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级 ...
- css基础-css选择器和css文本样式相关
css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 : ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- CSS选择器整理以及优先级介绍
一.基础选择器 选择器 名称 描述 兼容性 * 通配选择器 选择所有的元素 ie6+ E 元素选择器 选择指定的元素 ie6+ #idName id选择器 选择id属性等于idName的元素 ie6+ ...
- CSS选择器、CSS hack及CSS执行效率
主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与 ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- CSS选择器与CSS的继承,层叠和特殊性
什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...
- （3）选择元素——（4）css选择器（CSS selectors）
The jQuery library supports nearly all of the selectors included in CSS specifications 1 through 3, ...
随机推荐
- 解决dom4j java.lang.NoClassDefFoundError: org/jaxen/JaxenException
即使用这个方法需要以下两个包: dom4j-1.6.1.jar-306 KB jaxen-1.1-beta-6.jar-238 KB 或者 <dependency> <groupId ...
- 原生js完成拼图小游戏
废话不说,看代码,图片可以自己找,我这直接引用了百度的了 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml ...
- kettle系列-3.kettle读取数据库资源库很慢的优化
环境:windows7,jvm内存设置14G,kettle5.1后来升级到5.4,oracle作为资源库. 问题背景:我们通过web页面管理kettle的job运行,这只是一个管理界面,即使web项目 ...
- Java正则表达式实现字符串的动态多替换
需求场景: 今天在处理SQL语句的时候,由于数据库中存的格式是VARCHAR2型的,这就需要对SQL语句中WHERE条件后边的带数字的字符串加上单引号,对于字符串的处理,首先想到的就是正则表达式,对正 ...
- [转载]memcached完全剖析--1. memcached的基础
转载自:http://charlee.li/memcached-001.html 翻译一篇技术评论社的文章,是讲memcached的连载.fcicq同学说这个东西很有用,希望大家喜欢. 发表日:200 ...
- poj2689Prime Distance 素数测试
朴素素数测试是O(x1/2)的,每一个数都测试下来就炸了 然而如果全部预处理的话才是做大死,时间空间各种炸(大约有1亿个数) 所以怎么平衡一下呢? 其实在预处理的时候可以只处理一半:把21474836 ...
- Test Driven Development
链接:https://msdn.microsoft.com/zh-tw/library/dn743856.aspx
- [WinApi] C#获取其他窗口文本框内容（转）
声明部分: const int WM_GETTEXT = 0x000D; const int WM_GETTEXTLENGTH = 0x000E; [DllImport("user32.dl ...
- Intellij如何设置编译后自动重新加载class文件？
前段时间突然发现Intellij不能自动重新加载类了,每次编译后都要重新启动项目,才能显示更新效果,后来网上查询Intellij下如何配置热部署,都说是要配置构件,然后在web容器的编辑页面选择upd ...
- 谢欣伦 - OpenDev原创教程 - 通信开发库libComm
libComm是一个免费的简单的通信库,其中的接口类与函数大都以小写的x打头,来源于我的姓氏首字母(谢欣伦). 下载 Sample using libComm - v1.1 For WinXP lib ...