首页 > 代码库 > 定义选择器
定义选择器
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="http://www.mamicode.com/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;
}
定义选择器