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等等；
不管标签的藏得多深，都能选中；
选中的是所有的，不是某⼀个，所以说这个标签选择器选中的是"共性"的属性，⽽不是"特性"
<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的命名⼀定要规范，字母开头后边可以数字，下划线等等；-->
<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;
}
</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>
类选择器：具体的可以查看代码注释⾥⾯；
如何正确的使⽤类选择器及总结：
需求：
css选择器分为哪几类段落1：40px，绿⾊
段落2：绿⾊，下划线
<!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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论