css之标签选择器
标签（空格分隔）： 标签选择器
选择器定义：
在一个HTML页面中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素又需要设置相同的样式，选择器就是用来从HTML页面中查找特定元素的，找到元素之后就可以为它们设置样式了。选择器为样式规则指定一个作用范围。
基础选择器包含：
1.标签选择器
2.类选择器
3.ID选择器
4.通用选择器
标签选择器：
顾名思义通过标签名来选择元素；
例如：
p {
color: red;
}
将所有的p标签设置字体颜色为红色。
如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的选择器</title>
<style type="text/css">
/*标签选择器*/
/*p{*/
/*color:red;*/
/*font-size:20px;*/
/*}*/
/*span{*/
/*color:yellow;*/
/*font-size:20px;*/
/*}*/
body{
color: gray;
font-size: 12px;
}
</style>
</head>
<body>
<!--
css选择器
1.标签选择器：
标签选择器，可以选中所有的标签，比如div,ul,li,p等等；
不管标签的藏得多深，都能选中；
选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
</body>
</html>
id选择器：
通过元素的ID值选择元素：
例如：
#i1 {
color: red;
}
将id值为i1的元素字体颜色设置为红色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的选择器</title>
<style type="text/css">
/*id选择器*/
#box{
color: green;
}
#s1{
color: red;
}
#s2{
color: red;
font-size:16px;
}
</style>
</head>
<body>
<!--
css选择器
1.标签选择器：
标签选择器，可以选中所有的标签，比如div,ul,li,p等等；
不管标签的藏得多深，都能选中；
选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"
2.id 选择器：
#选中id
同一个页面中id不能重复，
是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<span id="s2">234</span>
</div>
</body>
</html>
类选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css的选择器</title>
<style type="text/css">
/*id选择器*/
#box{
color: green;
}
#s1{
color: red;
}
#s2{
color: red;
font-size:16px;
}
.titile{
color: yellowgreen;
font-size: 12px;
}
.aaaa{
color: red;
}
</style>
</head>
<body>
<!--
css选择器
1.标签选择器：
标签选择器，可以选中所有的标签，比如div,ul,li,p等等；
不管标签的藏得多深，都能选中；
选中的是所有的，不是某一个，所以说这个标签选择器选中的是"共性"的属性，而不是"特性"
2.id 选择器：
#选中id
同一个页面中id不能重复，
是不是所有的标签都可以加标签呢？任何的标签都可以设置ID，但是ID的命名一定要规范，字母开头后边可以数字，下划线等等；
3.类选择器：
所谓类：.，class 与id非常的相似，可以作用任何标签，
但是id特性是唯一，但是类是可以重复的，叫做归类；
同一个标签中可以携带多个类；多个类之间用空格隔开；
-->
<div>
<p>我是一个段落</p>
<ul>
<li>
<span>
想想吧！！！
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
藏得深的段落
</p>
</div>
</div>
</div>
</div>
<div id="box">
<span id="s1">123</span>
<span id="s2">234</span>
</div>
<div>
<h3 id="h" class="titile xiaoma egon aaaa">woshi yige sanji bieti </h3>
<h3 class="titile">woshi yige sanji bieti </h3>
<h3 class="titile">woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
<h3>woshi yige sanji bieti </h3>
</div>
</body>
</html>
类选择器：具体的可以查看代码注释里面；
如何正确的使用类选择器及总结：
需求：
段落1：40px,绿色
段落2：绿色，下划线
段落3：下划线，40px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.lv{
color: green;
font-size: 40px
;
}
.l2{
text-decoration: underline;
color: green;
}
.l3{
font-size: 40px;
text-decoration: underline;
}
</style>
<div>
<p class="lv">段落1</p>
<p class="l2">段落2</p>
<p class="l3">段落3</p>
</div>
</head>
<body>
</body>
</html>
方案2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style>
.lv{
color: green;
}
.un{
text-decoration: underline;
}
.big{
font-size: 40px;
}
</style>
<div>
<p class="lv big">段落1</p>
<p class="lv un">段落2</p>
<p class="un big">段落3</p>
</div>
</head>
<body>
</body>
</html>
总结：不要试图，用一个类的页面写完，这个标签要携带多个类共同设置样式，
2.每个类要尽可能的小，有公共的概念，能够让更多的标签使用
- 总结：
到底是用id修改样式还是用class呢？
答案：尽可能的使用class，除非特殊的原因，ID是用来js，也就是说js是通过ID来获取到标签的，后边我们还会说的这个内容；在css中尽量不要用id，（一般的来说，css用class,js用ID，更像是一种约定）
css之标签选择器的更多相关文章
- css用标签选择器在本页写样式
<title>静夜思</title><style type="text/css">p{ color:#ff0000; font-size:2 ...
- CSS各类标签用法——选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- CSS标签选择器(二)
一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...
- CSS 标签选择器
CSS 标签选择器 再<stype>标签内,通过指定输入标签来配置CSS样式 <html> <head> <!-- style 设置头部标签--> &l ...
- 前端基础之CSS的引入+HTML标签选择器+CSS操作属性
clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式: ...
- css基础 引用方式 标签选择器 优先级 各式布局
今天讲的css基础,了解了css即层叠式表,是美化网页,控制页面的样式. 样式表引进网页的3种方式1内联式,语法例子:<div style="width: 100px;height: ...
- CSS标签选择器&类选择器
基本选择器包括标签选择器.类选择器和ID选择器三类,其他选择器都是在这三类选择器的基础上组合形成 ##标签选择器 示例: <style type="text/css"> ...
- HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
- css标签选择器
/*标签选择器*/ input[type="text"] { width: 60%; } </style>
随机推荐
- Python全栈之路----函数----匿名函数
用lambda声明匿名函数,对lambda定义名字,才能被调用.下面的calc和func功能一致. def calc(x,y): return x*y func = lambda x,y: x*y # ...
- 2019西湖论剑网络安全技能大赛（大学生组）--奇怪的TTL字段（补充）
鉴于有人不会将得到的16进制数据在winhex中转成图片,我在这里写一个详细的步骤. 首先就是将六张图片的十六进制数据找出并提取出来. 打开winhex,新建一个文档. 大小可以选1bytes 将数据 ...
- 二维数组的查找（JAVA）
二维数组查找 解题思路:找到该二维数组的特殊点,易知该二维数组左下角的那个点很特殊.从这个点往右看,数值都在变大:而往上看,数值都在变小.所以 我们可以将这个点的索引设为起点(i,j),当比目标数大时 ...
- Jekins学习
1.Windows 安装入门 https://blog.csdn.net/u011541946/article/details/78003772 PS:坑1,https问题 坑2,offline ...
- oracle-ords
oracle rest data service ORDS Perforce adv. 一定,必须:必然地pagination n. 标记页数:页码,分页Online documentat ...
- Linux内核分析第二次作业
这周学习了<庖丁解牛Linux内核分析>并且学习了实验楼的相关知识. 在实验楼的虚拟环境下编写代码: 通过gcc编译后,使用查看文件命令:cat -n 20189223.c 在vim中, ...
- 阿里云轻量应用服务器 怎么控制怎么上传文件怎么安装JDK和Tomcat怎么完成JavaWeb的部署
你是否遇到过这些问题,自己的javaweb项目本地运行一切正常,但是一旦转移到阿里服务器之类的.就出现以下问题. 1 jsp无法解析java类 2 Only a type can be importe ...
- 在Release版本下使用VLD
前提 同Debug版本在VC中配置好VLD的相关信息,拷贝 Visual Leak Detector\bin\Win32目录下所有的文件和vld.ini到工程目标路径下. 强制检测 在程序入口处的cp ...
- python if not
判断是否为None的情况 if not x if x is None if not x is None if x is not None`是最好的写法,清晰,不会出现错误,以后坚持使用这种写法. 使用 ...
- 微信小程序如何设置服务器配置
最近微信小程序在it界火了起来,公司也要求我们开始接触微信小程序,废话不多说直接从配置微信小程序开始 1,首先,登录 https://mp.weixin.qq.com,(这里默认你已经获取到微信小程序 ...