【Css选择器】

Css选择器

一、基础选择器

1.标签选择器：（元素选择器）

标签名{属性1：属性值1；属性2：属性值2}
直接写标签
使用HTML标签名作为选择器

2.类选择器：

.类名{属性1：属性值1；属性2：属性值2} class=”类名“
1先给标签起名 2在写类选择器时，.加类名用于获取元素
3尽量使用英文字母表示，不要用纯数字、中文命名

3.多类名选择器：

多类名选择器在起类名时，中间用空格隔开，代表应用多个样式

4.id选择器：

#id{属性1：属性值1；属性2：属性值2}
1、先给标签起id名（id名唯一）
2、选择器使用#id名用于获取元素
id选择器和类选择器区别
id选择器和类选择器区别
W3C规定，在同一个页面不允许有相同名字的id对象出现，但是允许相同名字的class
类选择器(class)好比人的名字，可以多次重复使用的，比如：张伟、王伟、李伟、李娜
id选择器好比人的身份证号码，全中国是唯一的，不得重复
id选择器和类选择器最大的不同在于使用次数上

5.通配符选择器：

*{属性1：属性值1；属性2：属性值2}
*代表所有元素，适用于给所有元素设置相同样式时使用

二、复合选择器

1.交集选择器：

交集选择器由两个选择器构成，其中一个为标签选择器，第二个为类名选择器
标签.类名，代表获取到某个标签名并且指定类名的元素

2.并集选择器：

列举出的选择器都能获取到，可以使用类、id、标签选择器，选择器之间用逗号隔开

3.后代选择器：(包含选择器)

其写法是把外层标签写在前面，内层标签写在后面，外层选择器和内层选择器中间用逗号隔开

4.子代选择器：

子代选择器只能选择作为某元素子元素的元素。其写法是把父级标签写在前面，子级标签写在后面，中间跟一个>连接

三、伪类选择器

1.链接伪类选择器

link 未访问时
：hover 鼠标悬浮
：active 点击未释放
：visited 访问过后
标签伪类标签的书写顺序：a:link、a:visited、a:hover、a:active

2.清除无序列表的小点

list-style:none;

3.清楚下划线

text-decoration:none;

4.宽高属性

width
height

四、标签显示模式

1.块状元素

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，可以容纳任意的元素，
可以设置外边距和内边距

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

不换行，宽高是由内部撑开，设置宽高属性不生效，可以有水平
常见的行内元素有、、、、、、、、、等

3.行内块元素

不换行，可以有宽高和对齐方式

4.标签显示模式转换

块转行内：display:inline;
行内转块：display:block;
块、行内元素转换为行内块： display: inline-block;