CSS学习笔记-(二)

阅读数: 次 2022-01-09

超链接伪类
伪元素选择器
样式继承
选择器的权重

超链接伪类

:link 用来表示(默认)没访问过的链接(正常的链接)
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色(一般不轻易的改)
1
2
3
4
5
6
7
8
9
10
<style>
a:link{
color:cornflowerblue;
font-size:20px;
/* 设置大小后，两个都会变大 */
}
a:visited{
color:crimson;
}
</style>
在网页中的呈现结果为：
设置link的CSS，由于不管是访问过还是没访问过的链接都是正常的链接，因此设置字体大小时，两个都会变化
:hover 用来表示鼠标移入的状态
:active 用来表示鼠标点击
1
2
3
4
5
6
7
8
9
10
<style>
a:hover{
color:rgb(102, 139, 0);
font-size:20px;
}
a:active{
color:darkslategray;
font-size:20px;
}
</style>
在网页中的呈现结果为：
hover就是当鼠标移到对应的链接处时会变化，active是当鼠标点击超链接还没松手时会变化
伪元素选择器
伪元素：表示页面中一些特殊的并不真实存在的元素(特殊的元素)
伪元素使用::开头
::first-letter 表示第一个字母

::first-line 表示第一行

<style>
    p::first-letter{
        font-size:30px;
    }
    p::first-line{
        background-color:rgb(119, 217, 247);
        <!-- background-color表示背景颜色 -->
    }
</style>
<p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat sit, eius ipsa est impedit eligendi. Doloremque, optio mollitia in voluptates repellendus provident aperiam tempore nostrum natus, esse adipisci. Molestias, voluptatum.
    </p>

在网页中的呈现结果为：

::selection 表示选中的内容
1
2
3
p::selection{
background-color:rgb(207, 149, 190);
}
在网页中的呈现结果为：
::before 元素的开始
::after 元素的最后

before和after必须结合content属性来使用,content表示内容，凭空加上的内容，鼠标无法选中该内容，比如q标签中，自动给句子前后加上双引号，这个引号是没办法选中的
1
2
3
4
5
6
7
8
div::before{
content:"abc";
color:deeppink;
}
div::after{
content:"haha";
color:gold;
}
在网页中的呈现结果为：
为了加深学习可以进行餐厅联系练习：
餐厅练习

练习规则：
根据抖动的物品，在编辑框中输入对应正确的选择器写法

样式继承
样式的继承就是我们为一个元素设置的样式同时也会应用到它的后代元素上，继承是发生在祖先和后代之间的，继承的设计是为了方便我们的开发：利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需要设置一次即可让所有的元素都具有该样式
1
2
3
<body>
font-size:12px;
</body>
注意：
并不是所有的样式都会被继承，比如：背景相关的，布局相关的这些样式都不会被继承
选择器的权重
样式的冲突：
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重(优先级)决定。

选择器的权重：
内联样式          1,0,0,0
id选择器          0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器        0,0,0,1
继承的样式        没有优先级
1
<div id="box1" class="red" style="background-color:skyblue;">我是一个div</div>
比较优先级时：需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示，比如：#box{}的优先级div#box{}低，因为#box优先级为100，div#box的优先级为101。分组选择器是单独计算的。选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。如果优先级计算后相等，此时则优先使用靠下的样式
1
2
3
4
5
6
7
8
*{
color:red;
}
div{
color:yellow;
}

<div id="box">我是div<span>我是div中的span</span></div>
最后在网页中的呈现结果为：
因为span的样式属于继承div的样式，而继承的样式的优先级没有通配优先级高，因此span的样式还是由通配符来决定

可以在某一个样式的后边添加!important，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意，在开发中这个一定要慎用！
1
2
3
div{
color:red!important;
}

超链接伪类

伪元素选择器

样式继承

选择器的权重