HTML之CSS选择器+优先级

选择器优先级权重：

内联样式权重： 1000
ID选择器权重： 100
类选择器权重： 10
元素选择器权重：1
1、当权重一致时，靠近标签的生效
2、只要含有内联样式，有多少ID选择器累加权重，也没有内联优先级高，其余的也是一致。

全局内容编写**

body {
    xxx:xxx
}

一、基本选择器

1.1、元素选择器

p {
    font-size: 20px;
    background-color: pink;
}

1.2、ID选择器

div#c1{
    font-size: 20px;
    background-color: yellow;
}

1.3、类选择器

p.c2{
    background-color: red;
}

1.4、通用选择器

* {
    color: wheat;
}

二、组合选择器

2.1、后代选择器

div span {
    font-size: 20px;
    background-color: #516dff;
}

2.2、儿子选择器

div>span {
    font-size: 20px;
    background-color: #516dff;
}
后代选择器和儿子选择器的区别： >作用于元素的第一代后代，空格作用于元素的所有后代。（对所有后代都起作用）
例如:儿子选择器：div>span作用于div标签的第一代span标签；
	后代选择器：div>span作用于div标签的所有后代是span的标签

2.3、毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素   作用于第一个p标签*/
div+p {
    background-color: blue;
    margin: 5px;
}

2.4、弟弟选择器

/*div后面所有的兄弟p标签*/
div~p{
    background-color: cornflowerblue;
}

三、属性选择器

3.1、带有指定属性

p[title]{
    background-color: deepskyblue;
}

3.2、带有指定属性和值

p[title="m1"]{
    background-color: darkkhaki;
}

3.3、不常用的

/*找到所有title属性以hello开头的元素*/
[title^="hello"]{}
/*找到所有title属性以hello结尾的元素*/
[title$="hello"]{}
/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {}
/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {}

四、分组和嵌套

4.1、作用多个标签时

div, p{
    background:blue;
}

4.2、嵌套，多种选择器可以混合起来使用

.c2+div{
    background-color: darkgoldenrod;
}

五、伪类选择器

鼠标移动到链接上显示的颜色，并取消下划线

伪类选择器有很多种，用时可以自己查询：未访问和已访问链接
a:hover{
    color: red;
    text-decoration: none;
}
不只是a标签有hover，其余元素也可以有，比如：div、p等标签
active /* 选定的链接 */ 
input:focus /*input输入框获取焦点时样式*/

六、伪元素选择器

6.1、在每个标签元素之前或之后插入内容

p:before {
    /*after*/
  content:"*";
  color:red;
}

首字母大写

p:first-letter {
  font-size: 40px;
}