css选择器学习(一)
1、通用选择器“*”和元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器练习</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h3>h3标签</h3>
<p>h标签</p>
<div>div内容</div>
</body>
</html>
@charset "UTF-8";
/* 通用选择器 “*” 作用于所有元素*/
*{
color: #639;
}
/* 元素选择器 优先级高于通用选择器,即使将p样式置于*样式上面*/
p{
color:#294;
}
2、id选择器
<body>
<h3>h3标签</h3>
<p id="hid">h标签</p>
<div>div内容</div>
</body> /* id选择器,优先级高于元素选择器,即使置于元素样式上面 */
#hid{
color:#269;
}
3、类选择器
/***********************************两个类选择样式***********************************************/
/*******************************************************************************************************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择器练习</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h3 class="class1">h3标签</h3>
<h3>未引用h3.class1样式的h3标签,显示通用样式颜色</h3>
<p class="class1" id="hid">h标签</p>
<!-- 元素多类名,样式叠加,同种样式,根据优先级覆盖样式 -->
<div class="class1 class2">div内容</div>
</body>
</html>
css.css文件代码
@charset "UTF-8";
/* 通用选择器 “*” 作用于所有元素*/
*{
color: #639;
}
/* 元素选择器 优先级高于通用选择器,即使将p样式置于*样式上面*/
p{
color:#294;
}
/* id选择器,优先级高于元素选择器,即使置于元素样式上面 */
#hid{
color:#269;
}
/* 类选择器,颜色重新设置,在同时引用id选择器和类选择器时,虽然class1在下面,但最后效果是font-size叠加hid的color效果 */
/* 类选择器优先级低于id选择器 */
/* 同为类选择器,代码执行从上到下,不论引用顺序,则都会执行最下面代码样式(class2样式) */
.class1{
font-size: 30px;
color:#909;
}
.class2{
font-size: 50px;
color: aquamarine;
}
/* 指定某一特定元素 */
h3.class1{
font-size: 20px;
background: rgb(243, 188, 160);
padding: 20px;
}
/****************************************总结**********************************************/
可以一步步屏蔽代码,看执行效果
css选择器学习(一)的更多相关文章
- html之css选择器学习
相关内容: 什么是css选择器 标签选择器 类选择器 id选择器 并集选择器(分组选择器) 交集选择器 后代选择器 子标签选择器 属性选择器 相邻兄弟选择器 伪类选择器 伪元素选择器(伪对象选择器) ...
- CSS选择器学习小结
关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...
- CSS 选择器学习总结
1.id 选择器 #idname{color:red;} 2.class选择器 .classname{} 3.标签选择器 div{} 4.通配符选择器 *{} 5. 属性选择器 [id]{ } 5.选 ...
- 记录:CSS选择器学习
常用选择器:标签选择器.类选择器.ID选择器 子选择器(Child selectors) 还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素. .con> ...
- css选择器学习(二)属性选择器
属性选择器 /*******************************************css2中的属性选择器*************************************** ...
- css 选择器 (学习笔记)
参考 http://zachary-guo.iteye.com/blog/605116 1. div+p 选择紧接在 <div> 元素之后的所有 <p> 元素.解释 : fi ...
- XPath、CSS 选择器 -学习地址
http://www.w3school.com.cn/cssref/css_selectors.asp http://www.w3school.com.cn/xpath/xpath_syntax.as ...
- 第七十节,css选择器
css选择器 学习要点: 1.选择器总汇 2.基本选择器 3.复合选择器 4.伪元素选择器 本章主要探讨 HTML5中 CSS选择器,通过选择器定位到想要设置样式的元素.目前CSS选择器的版本已经升 ...
- HTML&CSS基础学习笔记1.33-元素选择器
元素选择器 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器: p { text-indent:10px; color:blue; } 什么情况下使用元素选择器,一般我们这 ...
随机推荐
- Python 实现二分查找(递归版)
二分查找 为什么使用二分查找: python中的列表,一般取值为遍历这个列表,直到取到你想要的值,但是如果你的列表是一个有着百万元素的列表呢,那样for循环遍历列表就会很慢,可能会循环几十万次,才能找 ...
- C语言获取当前系统时间
原文链接:https://blog.csdn.net/yuec1998/article/details/79883318 #include<stdio.h>#include<time ...
- Fiddler之打断点
1..Fiddler可以修改以下请求 --Fiddler设置断点,可以修改HTTP请求头信息,如修改Cookie,User-Agent等 --可以修改请求数据,突破表单限制,提交任意数字,如充值最小1 ...
- SQL,NoSQL和NewSQL
一:概念 SQL(Structured Query Language):数据库,指关系型数据库.主要代表:SQL Server.Oracle.MySQL.PostgreSQL. NoSQL(Not O ...
- 学习Python类的心得
类的注意事项 1)命名规则 需要注意的是,在Python中,变量名类似__xxx__的,也就是以双下划线开头,并且以双下划线结尾的, 是特殊变量,特殊变量是可以直接访问的,不是private变量, ...
- python学习--12 基本数据类型
数字 int -int 功能 1.转换 例如: a = '123' # 字符串print(type(a),a)b = int(a) # 将字符串转换成intprint(type(b),b) 运算结果 ...
- Django打印出在数据库中执行的语句
有时我们需要看models操作时对应的SQL语句, 可以用如下方法查看--- 在django project中的settings文件尾部添加如下代码 LOGGING = { 'version': 1, ...
- Codeforces 666E Forensic Examination(广义后缀自动机+线段树合并)
将所有串(包括S)放一块建SAM.对于询问,倍增定位出该子串所在节点,然后要查询的就是该子串在区间内的哪个字符串出现最多.可以线段树合并求出该节点在每个字符串中的出现次数. #include<b ...
- sessionId详解
sessionid是一个会话的key,浏览器第一次访问服务器会在服务器端生成一个session,有一个sessionid和它对应.服务端在创建了Session的同时,会为该Session生成唯一的se ...
- Unity NavMesh 格式 解析 分析 对比 Recast Navigation
工具软件 Excel Nodepad++ Sublime Unity 5.4 / 5.6 VS RecastDemo CodeBlocks 分析过程以Unity项目-Demo13为例 一. 创建测试模 ...