前端 （css 选择器）

常用选择器

元素选择器：

<style> span{color:red;font-size: 20px} </style>

<span>hello</span>

某一块元素整体变色

id选择器：

<style>

#w{color:red;font-size: 20px}

</style>

<span id="w">hello</span>

所定义的某一块元素变色

class选择器：

<style>

.style1{background-color: blue}

.style2{background-color: red}

</style>

<div class = "style1">blue</div>

<div class = "style1">blue</div>

<div class = "style2">red</div>

某一类被改变颜色大小

通配选择器：

<style>

*{background-color: blue}

</style>

<div>blue</div>

<div>blue</div>

<div>blue</div>

全部改变

复合选择器

交集选择器：

同时符合所有条件的元素被改变

语法：选择器1选择器2选择器n{}

并集选择器：

符合所出现的条件之一都做出改变

语法：选择器1，选择器2，选择器n{}

关系选择器

父元素
    -直接包含子元素的元素
子元素
    - 直接被父元素包含的元素
祖先元素
    - 直接或间接包含后代元素的元素
    - 一个元素的父元素也是他的祖先元素
后代元素
    - 直接或间接被祖先元素包含的元素
    - 一个元素的子元素也是他的后代元素
兄弟元素
    - 拥有相同父元素的元素

详细代码参考：(39条消息) 13.关系选择器_Keeling1720的博客-CSDN博客_关系选择器

属性选择器

[属性名字] {}

[属性名=“属性值”] {}

[属性名^="**"] {}拥有此属性的并且属性值以**开头的元素

[属性名$="**"] {}拥有此属性的并且属性值以**结尾的元素

[属性名*="**"] {}拥有此属性的并且属性值里包含**这些字符的元素

伪类选择器

状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

a:link 未访问链接时属性

a:visited 访问后的属性

a:hover 鼠标放上去时的属性

a:active 点击后的属性

<a href="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"> b站 </a>

结构性伪类：是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

:first-child 第一个节点

:last-child 最后一个节点

:nth-child(n) 顺数第几个节点（2n even 表示顺数所有偶数位节点 2n+1 odd表示奇数）

:nth-last-child(n) 逆着数第几个节点（2n even表示逆数所有偶数节点 2n+1odd表示奇数）

:not()    将符合条件的元素从选择器中去除

超链接的伪类：在使用超链接的伪类的时候，需要按照link->visited->hover->active的顺序来定义

伪元素选择器

  ::first-letter 选择元素文本的第一个字母
  ::first-line 选择元素文本的第一行
  ::before 在元素内容的最前面添加新内容
  ::after 在元素内容的最后面添加新内容
  ::selection被用户选中或者处于高亮状态的部分

清除浮动

清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度为0的问题

利用before和after实现，这只是其中一种方法，还有其他以后接触到了做汇总（未完）

标签名称:: after{
    content: "";/*设置添加的子元素的内容为空*/
    display: block;/*设置添加的子元素为块级元素*/
    height: 0;/*设置添加的子元素的高度为0*/
    visibility: hidden;/*设置添加的子元素看不见*/
    clear: both;/*给添加的子元素设置clear: both*/
}

继承

样式可根据关系等继承，但并不是所有的css属性都是可以继承的，例如背景颜色。

选择器的权重（优先权）

内联样式 1000 > id选择器 100 > 类和伪类选择器 10 > 元素选择器 1 > 通配选择器 0 > 继承的样式 （没有优先级）

出现选择器比较权重时，需要将选择器的权重相加比较，最后优先级越高，越优先显示

选择器的累加不会超过其最大的数量级

权重相同，就近原则（靠下）

如果在某一样式底下加！important，则获得最高优先级，甚至超过内联样式