共计 2213 个字符，预计需要花费 6 分钟才能阅读完成。
引入样式
1. 内部样式
方便在一个页面进行修改，格式为用
2. 行内样式
style 属性的应用
直接在 HTML 标签中设置的样式
此时 style 不是一个标签，而是一个属性
3. 外部样式
@import url("style.css");
常用的为 link（链接式）导入式不常用
行内样式>内部样式表>外部样式表
遵循就近原则
基本选择器
1. 标签选择器
p{
font-size: 14px;
color: green;
}
2. 类选择器
.class {font-size:16px;}3.ID 选择器
#id {font-size:16px;}
层次选择器
|
选择器 |
类 型 |
功能描述 |
|
E F |
后代选择器 |
选择匹配的 F 元素，且匹配的 F 元素被包含在匹配的 E 元素内 |
|
E>F |
子选择器 |
选择匹配的 F 元素，且匹配的 F 元素是匹配的 E 元素的子元素 |
|
E+F |
相邻兄弟选择器 |
选择匹配的 F 元素，且匹配的 F 元素紧位于匹配的 E 元素后面 |
|
E~F |
通用兄弟选择器 |
选择匹配的 F 元素，且位于匹配的 E 元素后的所有匹配的 F 元素 |
后代选择器只要是比 E 小的都起作用
子选择器只作用下一代
相邻选择器只作用挨着的下一个
兄弟选择器作用下面的
![]()
![]()
开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。
烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。
步步精心经营，细心打理，我们都能成为餐饮大亨哦。
![]()
如何做菜？
1. 点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；
2. 每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；
3. 烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；
4. 食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。
如何经营餐厅？
1. 自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；
2. 随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；
3. 餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。
p{font-size: 14px;}
.A{color:red ;}
body h2{font-size:16px ;}
body>.B{
width:887px ;
height:439px ;
}
.A~h2{color: blue;}
结构伪类选择器
|
选择器 |
功能描述 |
|
E:first-child |
作为父元素的第一个子元素的元素E |
|
E:last-child |
作为父元素的最后一个子元素的元素E |
|
E F:nth-child(n) |
选择父级元素 E 的第 n 个子元素 F，（n 可以是1、2、3），关键字为even、odd |
|
E:first-of-type |
选择父元素内具有指定类型的第一个 E 元素 |
|
E:last-of-type |
选择父元素内具有指定类型的最后一个 E 元素 |
|
E F:nth-of-type(n) |
选择父元素内具有指定类型的第 n 个F元素 |
first-child 与 first-of-type 的区别是
first-child 是第一个子类元素
first-of-type 是指定类型的第一个元素
热播
![]()
![]()
![]()
![]()
神武赵子龙
怒，林更新不抱网红抱女神
- 点击次数：242445 次
旋风十一人
胡歌变教练在撩前女友
- 点击次数：242445 次
太阳的后裔
宋慧乔吃嫩草
- 点击次数：242445 次
山海经之赤影传说
娜扎张翰再度联手
- 点击次数：242445 次
li{list-style: none;}
li:first-child{
font-size:16px ;
color:#4D4D4D;
}
p:first-of-type{
font-size:14px ;
color: #640000;
}
li:nth-of-type(3){
font-size: 12px;
color: blue;
}属性选择器
|
属性 选择器 |
功能描述 |
|
E[attr] |
选择匹配具有属性 attr 的E元素 |
|
E[attr=val] |
选择匹配具有属性 attr 的E元素 , 并且属性值为 val（其中val 区分大小写） |
|
E[attr^=val] |
选择匹配元素 E，且E 元素定义了属性 attr，其属性值是以val 开头的任意字符串 |
|
E[attr$=val] |
选择匹配元素 E，且E 元素定义了属性 attr，其属性值是以val 结尾的任意字符串 |
|
E[attr*=val] |
选择匹配元素 E，且E 元素定义了属性 attr，其属性值包含了“val”，换句话说，字符串val 与属性值中的任意位置相匹配 |
header a{color: #F4796F;}
section li{color:#6FCEFF ;}
footer a{color:#AB73F2 ;}
section:first-child{ }
input[type=text]{
background-color:#FFFFED ;
font-size: 18px;
}
input[type*=pass]{background-color:#AACBEE ;}原文地址: 初识 CSS3
