2021-03-26web前端开发课程笔记 CSS选择器-优快云博客

本文链接：https://blog.youkuaiyun.com/ITzz_qqzi/article/details/115228900

本文介绍了CSS选择器的详细内容，包括分组选择器、后代选择器、子元素选择器、相邻兄弟选择器和属性选择器的用法。此外，还讲解了伪类选择器的应用，如首元素、末元素、伪类选择符以及用户行为伪类如`:hover`。通过这些选择器，可以更精确地控制网页元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS语法

选择器

一、选择器分组在这里插入代码片
1.逗号隔开：p,strong
2.后代选择器：空格隔开 p strong

<style>
p strong{color: blue;}
</style>

（html用em标签强调斜体）

天使投资 是投资方式的一种

<body>
    <p>
        <em>天使<strong>投资</strong></em>
        是投资方式的一种
    </p>
</body>

3.子元素选择器p>

<style>
    p>strong{color: blue;}
</style>

4 相邻兄弟选择器h2+p

<style>
    h2+p {front-weight:bold;}
</style>

5 属性选择器img[src]
元素[属性] 含有该属性的元素
属性=“val” 属性取值val的元素
~= 包含
^=以为开头
$=以为结尾
？

二、伪类选择器
用于选择处于特定状态的元素，效果等同于向文档某部分应用了一个类一样

.content:first-child{
    background-color: blue;
}
.content:last-child{
    background-color: blue;
}

<body>
    <p class="content"></p>
    <p class="content"></p>
    <p class="content"></p>
    <p class="content"></p>
    <p class="content"></p>
</body>

首元素和末元素的选择

.content:nth-child(){
    background-color: blue;
}

（3）第三个
（odd）所有偶数个
（even）所有奇数个
（-n+2）

用户行为伪类：hover

.content:hover{
    background-color: blue;
}

::before和::after
（创建了不存在的元素并为其添加样式）
在真正页面元素前后插入一个额外的元素
元素

元素::before|after{
    content: "待插入内容"
    其余样式设定;
}

例：

p::first-letter{

}
p::first-line{
    
}

<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel voluptatibus ad itaque alias? Distinctio quidem totam harum, esse maiores alias voluptates numquam pariatur. Facere debitis doloribus odio eius autem tempore?</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat ipsam delectus sed explicabo perspiciatis alias minus suscipit autem dolore tenetur nostrum, dolorum saepe voluptate totam beatae. Laborum velit dignissimos dolore!</p>
</body>