前端学习日记-css选择器和元素(个人学习笔记,如果错了请指正)
2018-09-06 本文已影响0人
yhqiao
一、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内联元素只能容纳文本或者内联元素。