CSS基础教程-PHP培训九期线上班

元素按显示方式分为块级元素与行内元素两种。

块级元素：遵循最大化原则，总是独占一行显示，自动填满父级元素的内容区。块级元素的两边不允许有其它元素出现。块级元素中如果没有内容，需要设置宽高，否则无法在页面中显示出来，只能在代码中看到。例如: <div>, <ul+li>, <table>,<p>, <h1-h6>...

行内元素：遵循最小化原则，总是在一行文本元素的内部生成, 它的宽高由所在行决定,不可以进行设置。例如: <span>,<input>, <em>,<strong>,<a>...

---

CSS叫做“层叠样式表”，英文全称：Cascading Style Sheets

CSS可以用来设置HTML元素在文档中的布局与显示方式。

---

CSS选择器用来指明样式的作用对象，它的样式声明由属性和属性值两部分组成。

---

CSS简单选择器有以下几种：

元素选择器

p{
   color: brown;
}
属性选择器
tag[property]{
   font: 18px;
}
类选择器
.class{
   color: brown;
}
id选择器
#id{
   color: brown;
}
群组选择器
div,.class,#id{
   color: red;
}
通配符选择器
*{
   background-color: white;
}
其中类选择器和id选择器都属于属性选择器

---

上下文选择器有以下几种：

后代选择器：div p

父子选择器：div>p

同级相邻选择器：li.red + li

同级所有选择器：li.red ~ li

---

常用CSS结构伪类选择器：

选中页面所有的ul元素中的第一个子元素：ul > :nth-child(1)

选中第一个ul元素中的最后一个子元素：ul:first-child > :last-child

选中第一个ul元素中最后一个子元素中类型为<p>的元素：ul:first-of-type > :last-of-type > p:nth-of-type(n+1)

选中第一个ul元素中最后一个子元素中类型为<li>的后代元素：ul:first-child > :last-child li:nth-child(n+1)

---

常用CSS表单伪类选择器：

选择所有处于可用状态的input元素：input:enabled

选择所有处于不可用状态的input元素：input:disabled

选择所有处于被选中状态的radio元素：radio:checked