定义选择器

Posted 2020-08-16 加号与剑豪

20.1ID与类（class）
1.id是唯一的，类是多项的
2.id选择器：
适合所有h2标题
h2{
color：#333;
font-size:16px;
}
只适合title的h2标题
h2#title{
color：#eee；
}
3.结合多个class和id
ul#drinks{
color:red;
}
.mis{
color:green;
}
.hot{
color:yellow；
}

<ul id="drinks">
<li class="mis"></li>
<li class="mis"></li>
<li class="hot"></li>
</ul>
4.利用class改写基本样式：
p{
color：red；
}
.bleached{
color：green；
}

20.2层叠
外部链接：
<link rel="stylesheet"type="text/css"href="css/one.css">
two
three
导入样式：
@import url（“one.css”）
two
three
越晚给的规则越重要

20.3分组
h1{
font-family:宋体，隶书；
link-height:140%
color：red;
}
h2{
font-family:宋体，隶书；
link-height:140%
color：red;
}
h3{
font-family:宋体，隶书；
link-height:140%
color：red;
}

20.4继承
h1{
color:red;
}
<h1>xxx<i>xxxx</i></h1>
从body继承
body{
margin:10px;
color:red;
}

20.5上下文选择器
h1{
color:red;
}
i{
color:green;
}
使用上下文选择器
h1 i{
color:red;
}

 

20.6子；类选择器
.box{
color:red;
}
.box1{
font-weight:bold;
}
.box2{
font-style:italic;
}
<div class="box">box</div>
<div class="box1">box1</div>
<div class="box2">box2</div>

20.7其他选择器
类型选择器：
p{
color:black;
}
a{
text-decoration:underline；
}
h1{
font-weight：bokl；
}
后代选择器：
h2 i{
color：red；
}
li a{
text-decoration：none；
}
#main h1{
color：red；
}
伪类：
a:link{
color：green；
}
a:visited{
color：green；
}
a:hover，a:active{
color：red；
}
input：focus{
background-color，yellow；
}
通用选择器：
*{
padding：0；
margin：0；
}