css基本操作，简单选择器，复杂选择器

最新推荐文章于 2025-01-03 17:59:34 发布

D11_

最新推荐文章于 2025-01-03 17:59:34 发布

阅读量764

点赞数 19

文章标签： css 前端

本文链接：https://blog.csdn.net/Dxh0112_/article/details/139454669

版权

css简介

css介绍：

css指层叠样式表，定义如何显示HTML元素的计算机语言

css作用：

可以静态的修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

css基本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css基本使用</title>
    <style>
/*这样写代表选中了所有的p标签*/
        p{
            width: 50px;
        }
    </style>
    <link rel="stylesheet" href="css基本使用.css">
</head>
<body>

<!--
css用法：
    1.直接写在标签的style属性（行内样式）
    2.写在style标签内（内部样式）
    3.使用外部.css文件（外部样式），外部样式的css文件需要必须在HTML文件中引用才生效
    三种方式的优先级是根据就近原则的，哪个距离他设置的标签近，哪个就生效
-->
<!--内联元素无法设置宽高-->
<p style="width: 50px; height: 100px">直接写在标签的style属性</p>
<p>直接写在标签的style属性</p>



</body>
</html>

简单选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单选择器</title>
    <link rel="stylesheet" href="简单选择器.css">
</head>
<!--
简单选择器：
    1.标签选择器：直接通过标签名来选择
    2.id选择器：根据标签的id属性来选择，要注意id属性不能重复，使用：井号加id值
    3.class选择器：根据标签的class属性来选择，class可以重复，使用：点加上class值
    优先级：id>class>标签
-->
<body>
<p id="p1">11234567a</p>
<p class="p3">11234567b</p>
<p id="p2">11234567c</p>
<p class="p3">11234567d</p>


</body>
</html>

简单选择器.css

#p1{
    color: red;
}
#p2{
    color: red;
}
.p3{
    color: blue;
}

复杂选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复杂选择器</title>
    <link rel="stylesheet" href="复杂选择器.css">
</head>
<!--
复杂选择器：
    1.子代选择器：使用大于号作为标识，通过父标签，选中子标签
    2.后代选择器：使用空格作为标识，通过某个标签，来选中他的子标签，孙子标签或者重孙标签
    3.兄弟选择器：使用波浪线作为标识，通过某个标签，选择和他同级的标签，只能选择下面的，上面的和他本身选不到
    4.相邻选择器：使用加号作为标识,通过某个标签，选择和他同级的一个标签，只能选择下面的，上面的和他本身选不到
    5.属性选择器：使用中括号作为标识，中括号内就是属性名，就和字典一样，通过键来取值，在某些标签自定义属性的时候可以选择
       所有复杂选择器的优先级都是同级的，哪个写在下面，就生效哪个
    如果子标签有自己的样式，那就优先生效自己的，如果没有，就继承父标签的
-->
<body>
<div>
    <p>顶上额外加的p标签</p>
    <p id="p0">这是div中的第一个p标签</p>
    <p>
        <span>这是div中的第二个p标签中的第一个span标签</span>
    </p>
    <p>这是div标签中的第三个p标签</p>
    <p>这是div标签中的第四个p标签</p>
    <span ab="12">这是div中的第二个span标签</span>
    <span ab="123">这是div中的第三个span标签</span>


</div>

</body>
</html>

复杂选择器.css

p>span{
    color: red;
}
div span{
    color: blue;
}
#p0~p{
    color: chartreuse;
}
#p0+p{
    color: yellow;
}
span[ab]{
    color: pink;
}
span[ab="123"]{
    color: blueviolet;
}