深探CSS选择器🚄

选择器

• 简单选择器

1. ID选择器：id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式

#text{
    text-align:center;
    color:red;
}
复制代码

1. Class选择器：class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

.center {
    text-align:center;
}
复制代码

1. 元素选择器：根据元素名称来选择 HTML 元素

h1 {
    text-align:center;
}
复制代码

• 组合器选择器

1. 后代选择器：选择后代中某个元素

div p{
    color:red;
}
复制代码

1. 子选择器：选择后代所有的某个元素

div > p {
    background-color: yellow;
}
复制代码

1. 相邻兄弟选择器:选择相邻之后的所有元素

div + p {
    background-color: yellow;
}
复制代码

1. 通用兄弟选择器:选择所有同级的某元素

div ~ p {
    background-color: yellow;
}
复制代码

• 伪类选择器

1. 伪类：通常向选择器加入一些特殊的效果

1. 锚伪类

/* 未访问的链接 */
a:link {
    color: #FF0000;
}
/* 已访问的链接 */
a:visited {
    color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
    color: #FF00FF;
}
/* 已选择的链接 */
a:active {
    color: #0000FF;
}
复制代码

1. 伪元素

• 属性选择器

1. [attribute] 选择器:选择带有某属性值的元素

a[href] {
    background-color: yellow;
}
复制代码

1. [attribute="value"] 选择器：选择某属性值为某值得元素

img[alt="qlstudio"] { 
    background-color: yellow;
}
复制代码

1. [attribute|="value"] 选择器:选取某属性值为value开头的元素（value-top）

[class|="top"] {
    background: yellow;
}
复制代码

1. [attribute^="value"] 选择器:选取某属性值为value开头的元素（valuetop)
2. [attribute$="value"] 选择器:选取某属性值为value结尾的元素（botvalue)
3. [attribute*="value"] 选择器:选取某属性值含有value的元素

• 其他

1. 通用选择器：全部元素

* {
    padding: 0;
}
复制代码

1. 组合选择器：当某几个元素样式相同

h1,p,h2 {
    color:red;
}
复制代码

选择器权重

加载顺序

之前我们讲了选择器的引入方式以及选择器的类别大家有没有想过若我们给一个元素用不同的引入设置相同属性不同属性值的样式会发生什么呢 举个列子

p{
    color:green;
}
link
复制代码

link
p{
    color:green;
}
复制代码

我们这里改变了两者的顺序，那么我们将会看到顺序最后引入的样式，后面的样式覆盖前面的样式

权重计算

大家都了解二进制吧 0010>0001

div span {
    /* 0,0,0,2 */
}
p #span_one{
    /* 0,1,0,1 */
}
复制代码

浏览器会执行权重最大的样式

注意：组合选择器由相加计算得到且选择器权重不会满十进一 0,1,0,0>0,0,28,0

层叠与继承

层叠

如果优先级相等，对于同一元素，后面的css样式会覆盖前面的css样式

继承

子元素会继承父元素的一些特定的属性值

• 常用默认继承：

1. 字体系列：font-family,font-size;
2. 文本系列：text-indext.line-height,color;
3. 元素可见性：visbility;

• 常用默认不继承：

1. 高度与宽度：height,width;
2. display
3. 文本阴影：text-shadow
4. 背景属性：background
5. 浮动属性：float
6. 定位属性：position，left，top；