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>

时间: 2024-11-05 18:46:38

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

Unit02: CSS 概述 、 CSS 语法 、 CSS 选择器 、 CSS声明

Unit02: CSS 概述 . CSS 语法 . CSS 选择器 . CSS声明 my.css p { color: yellow; } demo1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <!-- 2.内部样式:在head元素内部的style标签内 写样式,这种样式

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

css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url(“*.css”);使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>class选择器>标签选择器 如果设置了同样的类样式,类样式与元素里类的顺序没

web前端入门到实战:css选择器和css文本样式相关

[文章来源微信公众号:每天学编程]---关注,后台领取编程资源 css基础-css选择器和css文本样式相关: 使用link链入外部样式,页面加载时会同时加载样式 @import url("*.css");使用导入式,页面加载完后,才会加载样式 链接伪类的顺序 :link-> :visited ->:hover-> :active 或者 : visited -> : link ->:hover-> :active 选择器的优先级: id选择器>

CSS选择器(CSS终极指南阅读回顾)

CSS选择器语法 CSS样式表有选择器和生命块组成.声明块有属性名.属性值.中间有冒号分开,后面分号结尾. 选择器组操作 可以把几个选择器组合到一块,来快速选取操作的元素.例如,h1,h2,h3,h4,h5,h6{color:red;} *通配符选择器,选择所有的元素. 标签选择器 类选择器 由点号加名字组成.需要html标签添加class属性. 类可以结合标签选择器使用:p.class1. 两个类可以.class1.class2的方式使用,选择class="class1 class2"

css选择器、css继承关系、css盒子模型

一.摘要 总结前端部分css选择器.css继承关系.css盒子模型等相关知识,并对容易出错的地方进行分析说明. 二.原因 在开发前端页面时如果对css选择器.继承关系,层叠,以及padding.margin区别和浮动问题理解不到位,会导致不知道什么时候该用哪种方法来处理问题.此文档是针对这些问题进行说明. 以下是对相关知识点的总结与分析: 三.选择器 1.基本选择器 (1)* 通配符选择器  代表所有元素 例子: *{ margin:0; padding:0;} (2)标签选择器 代表网页中的所

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

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS  一.CSS选择器.优先级与匹配原理     CSS选择器大概可以分为:1.id选择器(#myid)  2.类选择器(.myclassname)  3.标签选择器(div,h1,p)  4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*)  8.属性选择器(a[rel='externaml']) 9.伪类选

HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性

1.基本CSS选择器 (1)标记选择器 <style>                       h1{ color:red; font-size:25px;}           </style> 例: 1 <html> 2 <head> 3 <title>标记选择器</title> 4 <style type="text/css"> 5 h2{background-color:red;color:

CSS - 选择器(标签选择器、类选择器、ID选择器)

标题 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <

前端面试题-CSS选择器

一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document.querySelectorAll. 二.选择器类型 基本选择器 组合选择器 属性选择器 伪类选择器 伪元素选择器 三.基本选择器 选择器 含义 作用 CSS .class 类选择器 匹配 class 包含(不是等于)特定类的元素 1 #id id选择器 匹配特定 id 的元素 1 * 通用元素选择器