CSS中的选择器有哪些?
1.元素选择器
元素选择器:根据标签名来选中指定元素
语法:标签名{}
例子:p{}，h1{}
缺点:会选中所有的标签
例:
<p>少小离家老大回</p>
2.id选择器
作用:根据元素的id属性值选中一个元素 只能选中一个元素
语法:#id的属性
例子: #box(),#red()
缺点:只能给一个元素设置样式
例:
<p id="red">金樽清酒斗十千</p>
3.类选择器
作用:根据元素的class属性值选中一组元素
语法:.class 属性值
例子:.yu
优点:可以重复使用
例:
<p class="yu">玉盘珍羞直万钱</p>
<p class="yu">秋水共长天一色</p>
4.通配选择器
作用:选中页面中的所有元素
语法:*
例:
<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音未改鬓毛衰</p>
<p id="red">金樽清酒斗十千</p>
<p class="yu">玉盘珍羞直万钱</p>
<p class="yu">秋水共长天一色</p>
<p>落霞与孤鸿齐飞</p>
5.复合选择器
1.交集选择器
作用:同时满足两个条件 相当于或的运算
语法:元素选择器.类选择器{}
例子:div.red{}
例:
<div class="red">我是div</div>
<p class="red">我是P</p>
2.并集选择器(分组选择器)
作用:同时选择多个选择器对应的元素 相当与的运算
语法:选择器1,选择器2,选择器3选择器{}
例子:h1,span{}
注:每个选择器中间需要用逗号隔开！
例:
<div>今天下雪</div>
<h1>今天天气不好</h1>
<p class="bule">我是P</p>
6.关系选择器
每个选择器中间的关系
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素
注:一个元素的父元素也是它的祖先元素
后代元素:直接或间接被祖先元素包含的元素子元素也是后代元素
兄弟元素:拥有想同父元素的元素
1.父子选择器
作用:选中指定元素中的指定子元素
语法: 父元素 > 子元素
例子:div > span{}
例:
<div class="box">我是div.
<p>我是div中的p
<span>我是P元素中的span</span>
</p>
<span>我是div的sapn元素</span>
</div>
2.后代元素选择器
作用：选中指定元素内的指定后代元素
语法：祖先(空格)后代
此时会直接选中div下的span元素
3.兄弟元素选择器
1.选择下一个兄弟元素
语法:前一个 + 下一个
2.选择下面所有的兄弟元素
语法:前一个 ~ 下一个
注:选中的都是下面的元素 如果在上面加一个span元素他不会被选中
7.属性选择器
```
<p title="abc">少小离家老大回</p>
<p title="abcde">乡音未改鬓毛衰</p>
<p title="hello">金樽清酒斗十千</p>
<p>玉盘珍羞直万钱</p>
<p>秋水共长天一色</p>
<p>落霞与孤鸿齐飞</p>
```
属性名选择器
1.[属性名] 选择含有指定属性的元素
2.[属性名 = 属性值] 选择含有指定属性和属性值的元素
3.[属性名 ^= 属性值] 选择属性值以指定值开头的元素
4.[属性名 $= 属性值] 选择属性值以指定结尾的元素
5.[属性名 *= 属性值] 选择属性值中含有某值的元素的元素
8.伪类选择器
```
例:
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
</ul>
```
伪类选择器
伪类:(不存在的类，特殊的类)用来描述一个元素的特殊状态
特点：一般情况下都是使用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第N个子元素
特殊位:第n个 n的范围0到正无穷
2n或even 偶数位的元素
2n+1或odd 奇数位的元素
否定伪类 :not(:nth-child(n)) 除了第几个
9.伪元素选择器
div> Hello world</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure qui ab porro eveniet error,
tempore necessitatibus, impedit tempora fuga autem id laudantium distinctio, unde animi odio expedita labore aliquam quo?
</p>
伪元素选择器
表示页面中一些特殊的并不真实存在的元素(特殊的位置)
::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
注:这两个需要结合一个content属性
::before 表示元素的起始开始位置
::after 表示元素的最后
10.选择器中的权重
`内联 > ID选择器 > 类选择器 > 标签（元素）选择器 `
11.CSS样式优先级计算法
三条标准:
1.就近原则,后加样式优于前面的样式
2.内嵌样式>内联样式>外联样式
3.!Important 大于一切样式
权重计算规则:
内联样式:style="" -----权值1000
id选择器: #id -----权值100
类/伪类/属性选择器 -----权值10
类型选择器和伪元素 :div/p ------权值1
通配选择器 * -------权值0
注:继承的样式没有权值
12.样式的继承
在css中，继承是指父元素设置的一些属性，后代元素自动拥有这些属性，继承只会发生在后代元素上
13.继承的分类
1.字体系列样式
2.文本系列属性
3.元素可见性
4.表格布局样式
5.列表属性
6.列表属性
7.引用
8.光标属性
注: 1.a标签的字体颜色不能被继承 2.h1-h6标签字体的大小也是不能被继承
无继承属性:
display
文本属性 如:text-secoration
盒子模型属性 如:宽度 高度
背景属性 如；背景图片
定位属性 如:浮动
生成代码内容属性 如:content
轮廓样式属性 如:outline-style
页面样式属性 如:size page-break-before
可继承样式:
font-size/fon-family/color [ul/li/ol/dl/dd/dt]
不可继承样式:
width/height/margin/padding/border
14.浏览器是如何解析选择器的？
样式系统优先从内联选择器开始匹配,通过权重,先找祖先元素,再一级一级查下去,
如果匹配则使用样式,如果不匹配则放弃
15.::after/:after与::before/:before的区别?
1.单冒号用于css3伪类 双冒号用于css伪元素
2.::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素，并不存在DOM中，只存在页面中
