CSS选择器伪类 a相关的伪类伪元素_css选择所有虚拟超链接的a元素-CSDN博客

本文链接：https://blog.csdn.net/BabyQ12138/article/details/129496808

Cascading Style Sheets 级联(层叠)样式表
css可以用来设计网页中元素的样式即化妆

内联样式
不利于维护

<p style="color:red;font-size:30px;">少小离家老大回,乡音无改鬓毛催</p>

如果希望影响到多个元素写入和修改时需要多次复制故不利于维护
开发时绝对不要使用内联样式

将样式写到head中的style标签里

内部样式表
拥有层叠性继承性优先级
更便于重复使用

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    <!-- 使用选择器选择-->
        p{
            color: aqua;
            font-size:30px;
        }
    </style>
</head>

外部样式表
最佳实践
可以将CSS样式编写到一个外部的CSS文件中

<link rel="stylesheet" href="style.css">

在这里插入图片描述
好处:
所有网页均可引用,使样式可以在不同页面间复用
将样式编写到CSS文件中可以使用浏览器的缓存机制 可以加快网页加载速度提高用户体验

CSS

选择器
声明块
- 声明
- - 键
  - 值

标签(元素)选择器
p{
color: red;
}

ID选择器
ID最好不能重复
#id{
color: red;
}

属性选择器
class可以重复使用
.classname{
color: blue;
}
多个class中间使用空格隔开

<h1 class="classname abc">我是标题</h1>

通配选择器
选中页面中的所有元素
*{
color: chartreuse;
}

复合选择器
交集选择器
选择同时符合多个条件的选择器
语法
选择器1选择器2选择器3选择器n{}
当存在标签(元素)选择器时
以标签(元素)选择器开头

选择器分组(并集选择器)
作用:同时选择多个选择器对应的元素
h1,span{
color: green;
}

关系选择器
父元素 直接包含 子元素
祖先元素 直接或间接包含 后代元素
即一个元素的父元素也是他的祖先元素

兄弟元素
拥有相同父元素

子元素选择器 >
选定父元素的指定子元素
语法:
父元素>子元素
选中父元素中的子元素

**后代元素选择器 **
选中指定元素后代的选择器
语法:
祖先后代
div > p > span{
color: orange;
}

兄弟元素选择器 + ~
+又叫下一个
选择紧挨着的下一个兄弟
前一个 + 下一个
div > p + span{
color: orange;
}
**~**又叫下边所有

属性选择器
[title]{
color: orange;
}
p[title]{
color: orange;
}
p[title=“abc”]{
color: orange;
}
p[title^=“abc”]{
color: red;
}
^="abc"表示属性值以abc开头
$="abc"表示属性值以abc结尾
*="abc"表示属性值包含abc

伪类选择器
伪类
不存在的特殊的类
用来描述元素的特殊状态
first-child 第一个子元素
nth-child 第n个子元素
特殊值
n n的范围0到正无穷
2n(0 2 4 6 8) 或者 even所有偶数位置元素
2n+1(1 3 5 7 9) 或者 odd所有奇数位置元素
last-child 最后一个子元素
ul>li:first-child{
color: red;
}

在这里插入图片描述

即根据所有的子元素进行排序
但是只影响相应的种类

特定类型子元素
first-of-type
last-of-type
nth-of-type
在这里插入图片描述

:not()
否定伪类
将符合条件的元素从选择器中挑出不要
在这里插入图片描述
超链接的伪类

<html>
<head>
<style>
		/* 没访问过的标签 */
        a:link
        {
            color: red;
            font-size: 50px;
        }
        /* 访问过的链接 */
        /* 由于隐私的原因 visited这个伪类只能修改链接颜色 */
        a:visited{
            color: orange;
            
        }
        /* hover表示鼠标移入状态 */
        a:hover{
            color: aqua;
            font-size: 10px;
        }

        /* active表示鼠标点击的状态 */
        a:active{
            color: black;
        }
</style>
</head>
</html>

伪元素
::开头

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p::first-letter{
            font-size: 30px;
        }
        p::first-line{
            background-color: yellow;
        }
        p::selection{
            background-color: greenyellow;
        }
        div::before{
            content: "abcdsays:";
            color: aqua;
        }
        div::after{
            content: "lllllllllll";
            color: red;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate totam dicta similique quam laborum. Vel dicta tempora, distinctio ex quia delectus quisquam consequatur, amet natus commodi ab similique iusto ea!</p>
    <div>hhhhhhhhhhh</div>
</body>
</html>