前端--css选择器

css基本语法

1、css概括

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
 样式通常存储在样式表中
 把样式添加到 HTML中，是为了解决内容与表现分离的问题
 外部样式表可以极大提高工作效率
 外部样式表通常存储在 CSS 文件中
 多个样式定义可层叠为一个

2、基本语法
选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

多条 CSS 声明用分号分隔，声明块用花括号括起来。

基本样式

文档流的顺序：上左下右
行级标签：按照文档流的顺序依次排列
块级标签：独占一行
1.基本样式
宽：width:100px;
高：height：100px;
背景颜色:background-color:coral;

1、 css层叠样式表
(1)、由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

css写法一 <font syle>内连样式表

（2）当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用
<style> 标签在文档头部定义内部样式表
css写法二 内部样式**<style**>标签里写
font{…
}
(3)、当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部
样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个
页面使用 < link > 标签链接到样式表。
css写法三 外部样式表：
<link rel=”stylesheel”href>
@import url(‘./class .css’);

Heml 和 css结构样式分离 ，写法上html属性和属性值用**=**（等于号）拼接，css是 ：（冒号）拼接

2、css颜色表示
单词表示: red、green、blue…
十六进制表示:取值范围 (0～9 && a～f)
RGB 三原色表示:取值范围 (0～255)

3、css 注释
CSS 注释以 /* 开始, 以 */ 结束

层叠、冲突、继承

层叠：同一个元素使用了不同样式表，所有的样式进行叠加叫做层叠**display:block**

冲突: 同一元素设置相同的属性会造成冲突，遵循就近原则选择属性值

继承：在子父关系中，文本样式可以被继承，布局样式不能被继承 （快级元素可以继承父的宽，行级元素不可以）
<div>块标签

css 样式表优先级

就近原则
相同样式优先级：
当设置相同样式时，后面的优先级较高。
但不建议重复设置样式的情况。
内部样式与外部样式
内部样式与外部样式优先级相同，如果都设置相同样式
那么后写的样式优先级更高 单一样式优先级
style 行间 > id > class >tag > * > 继承
important 强制优先

选择器

1、全局选择器 （*）
全局通用的样式选择器又叫做通配符选择器

*{
margin: 0%;
padding: 0%;

2、标签选择器
HTML 中定义的标签可以作为选择器

p { text-align: center; color: red;

3、类选择器 （.）
类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

4、id选择器（#）
id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。

5、群组选择器 （，）

p,a{
background-color: aqua;

6、层次选择器
后代选择器 (空格)
子代选择器 (>)
父子关系必须是上下级关系紧挨在一起

  ul>li{color: red;}

.uu li{list-style: none;}(去除无序列表)

相邻兄弟 (+)

.uu+a{background-color: black;}

通用兄弟(~)

.uu>li~a{background-color: chartreuse;}

5、伪类选择器

UI 伪类选择器： 通常用在 a 标签(切记顺序位置) link{ 属性:属性名}初始状态默认状态
visited{属性:属性名}超链接被访问后的状态 hover{属性:属性名}超链接鼠标悬浮时的状态
active{属性:属性名}超链接被激活时的状态

注：多用于链接标签中
focus{属性:属性名}向拥有键盘输入焦点的元素添加样式
lang{属性:属性名}向带有指定 lang 属性的元素添加样式
input:checked 选中每个被选中的 input 元素
input:disabled 选择每个禁用的 input 元素
input:enable 选择每个启动的 input 元素
：after{content:” ”}
：before 通过伪类的方式给元素添加 一个文本内容
例子：

             b+a:link{background-color: azure;}
			b+a:visited{background-color: blue;}
			b+a:hover{background-color: darkgoldenrod;}
			b+a:active{background-color: orange;}
```

6、 结构型伪类选择器：

root 选择文档根元素（不太常用）
nth-child() 元素的第 n 个相同元素
first-child 第一个子元素
last-child 最后一个子元素
only-child 仅有的一个子元素
nth-of-type() 匹配同类型中的第 n个同级兄弟选择器元素
first-of-type 匹配同类型中的第一个同级元素
last-of-type 匹配同类型中的第一个同级元素
only-of-type 只有一种类型的子元素 empty 匹配没有任何子元素的元素

    ul li:nth-child(3){background-color: red;}
   a:nth-child(4){background-color: azure;}
    ul p:nth-child(18){background-color: pick}** 

7、属性选择器
title只有属性名
title=“value”属性名和值
title ~=“value”值为多个词中间有空格隔开，属性值在其中
title^=“value”属性值是以 value 开头
title $=“value”属性值是以 value 结束
title *=“value”属性值包含 value
title | =“value”属性值为 value 或 value