前端学习日记-css选择器和元素(个人学习笔记，如果错了请指正)

一、css选择器

1.类选择器

2.ID选择器

3.标签选择器

4.父子选择器

4.1 .div a{ }选取子元素为a的所有

4.2 .div > a { }选取子元素中第一个a

5.全局选择器

 .div * { }选取全部

6.属性选择器

6.1 [ title ] { color:red; }为带有 title 属性的所有元素设置样式

6.2 [ title=W3School ] { border:5px solid blue; }为 title="W3School" 的所有元素设置样式

6.3 input [ type="text" ] { } 常用类型，定义类型为text的所有input框

6.4 [ lang |= en ] 选择 lang 属性值以 "en" 开头的所有元素

7.伪类选择器

：before，：after在元素前后添加内容，兼容ie8，用途广泛，（ps：ie8兼容几乎所有带一个冒号的选择器）

：first-child、last-child、only-child选取子元素的第一，最后，唯一，等等元素

：nth-child（n） 选择属于其父元素的第n个子元素的每个元素

：nth-last-child（n） 从最后一个子元素开始计数，选择属于其父元素的第n个子元素的每个元素

二、元素（块级元素和行内元素）

1.块级元素（block）

1.1支持大部分css属性，例如宽、高、背景、边距等

1.2行内元素能通过设置display：block；变为块级元素；

1.3独占一行，大小自适应，可以使用float或者display：inline-block；等来设置成一行显示；ps：float需要清除浮动；

1.4块级元素既可以容纳内联元素也可以容纳块级元素。

2.行内元素/内联元素（inline）

2.1大小根据内容的变化而变化，但不可控制，相邻行内元素元素之间不换行处理，直到超出父容器的宽度。

2.2内联元素只能容纳文本或者内联元素。