day 33 css

最新推荐文章于 2023-04-14 19:57:24 发布

迪迦张

最新推荐文章于 2023-04-14 19:57:24 发布

阅读量927

点赞数

分类专栏：前端文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_1617271856/article/details/120167500

版权

这篇博客详细介绍了CSS中的各种选择器，包括基本选择器、属性选择器、伪类选择器，以及如何处理浮动、溢出和定位。还讨论了选择器的优先级、盒子模型和display属性的应用。

摘要由CSDN通过智能技术生成

day 33 css

基本选择器

1.元素选择器
p {
   color: "red";}
2.ID选择器
#i1 {
   
  background-color: red;
}
3.类选择器
复制代码
.c1 {
   
  font-size: 14px;
}
p.c1 {
   
  color: red;
}
复制代码
注意：

样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

属性选择器

/*用于选取带有指定属性的元素。*/
        [username] {
            color: red;
        }
/*用于选取带有指定属性和值的元素。*/
         [username='z'] {
            color: red;
        }
    /*寻找div里面的username=z*/
         div[username='z'] {
            color: red;
        }

组合与嵌套

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器,只是div里面的p变*/
        div p {
     
            color: red;
        }

        /*逗号表示并列关系id=d1和class=c1 */
         #d1, .c1 {
     
            color: red;
        }

    </style>
</head>
<body>
<div id="d1">
    div
    <p>
        div-p
        <span>
           div-p-span

        </span>
    </p>
</div>
<p>
    pppppppp
</p>
<span class="c1">sapn11111</span>
<div id="d2">
    div
</div>
</body>

伪类选择器超链接配合着

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a {
     
            color: gray;
        }

        /*鼠标悬浮时候的样式， 掌握主*/
        a:hover {
     
            color: beige;
        }

        /*按住鼠标左键不放松的样式*/
        a:active {
     
            color: green;
        }

        /*访问之后的样式*/
        a:visited {
     
            color: blue;
        }
    </style>
</head>
<body>
<a href="">点我哦</a>
</body>
</html>

违元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*第一个字母*/
        p:first-letter {
     
            color: red;
            font-size: 24px;
        }

        /*在什么什么之前加的东西 content要写这个*/
        p:before {
     
            content: 'kill is 活着';
            font-size: 28px;
            color: blue;
        }


        /*解决父标签塌陷问题 在什么什么之后*/
        p:after {
     
            content: 'kill and 死亡';
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
<p>
    人活着是为了是什么
</p>
<!--<ul>-->
<!--    <li></li>-->
<!--    <li></li>-->
<!--    <li></li>-->
<!--    <li></li>-->
<!--    <li></li>-->
<!--</ul>-->
</body>
</html>

选择器的优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <style>-->
<!--        #d1 {-->
<!--            color: blue;-->
<!--        }-->
<!--    </style>-->
<!--    <link rel="stylesheet" href="mycss.css">-->

    <style>
        #d1 {
     
            color: red;
        }

        .c1 {
     
            color: green;
        }

        div {
     
            color: blue;
        }
    </style>
</head>
<body>
<!--
选择器优先级
1. 选择器相同的情况
        离谁越近就听谁的
        后执行的把前面覆盖
2. 选择器不同的情况
       行内式 > id选择器 > 类选择器 > 标签选择器
-->

<!--<div id="d1" style="color: black">div</div>-->

<div id="d1" class="c1" style=&#