1.选择器
1.1 基本选择器
标签选择器
<style>
h1{
color: #eeb88c;
background-color: #33ee96;
border-radius: 3px;
}
p{
font-size: 80px;
}
</style>
</head>
<body>
<h1>cscs</h1>
<h1>csc2s</h1>
<p>listen to me</p>
类选择器
<style>
/* .class 多个标签归类,可复用*/
.spring {
color: #eeb88c;
}
.summer {
color: #33ee96;
}
</style>
</head>
<body>
<h1 class="spring">AAAAAAAAA</h1>
<h1 class="summer">BBBBBBBBB</h1>
<h1 class="autumn">CCCCCCCCC</h1>
<p class="spring"> PPPPPPP</p>
id选择器
<style>
/* #id id必须保证全局唯一
不遵循就近原则
id选择器>class选择器>标签选择器*/
#spring {
color: #33ee96;
}
</style>
</head>
<body>
<h1 id="spring">title1</h1>
</body>
1.2层次选择器
/*后代选择器*/
body p{
background: #cb4bee;
}
/*子选择器*/
body > p {
background: #cb4bee;
}
/*相邻兄弟选择器*/
.active + p{
background: #cb4bee;
}
1.3结构伪类选择器
/*ul的第一个子元素*/
ul li:first-child{
background: #cb4bee;
}
/*ul的最后一个子元素*/
ul li:last-child{
background: #eea87b;
}
/*选中p1:定位到父元素,选择当前的第一个元素*/
p:nth-child(1){
background: #3aee7d;
}
/*选中父元素下的p元素的第二个*/
p:nth-of-type(2){
background: aliceblue;
}
1.4属性选择器**
/*选择有id属性的标签*/
a[id]{
background: #eeb88c;
}
a[id=first]{
background: #33ee96;
}
/*class中有links的元素*/
a[class *=links]{
background: #cb4bee;
}
/*选中href中以http开头(结尾 $=)的元素*/
a[href^=http]{
background: #cb4bee;
}
2.页面修饰
字体样式
文本样式
超链接伪类
列表
盒子模型
浮动
定位