css的选择器

最新推荐文章于 2024-06-16 22:45:39 发布

李有财.

最新推荐文章于 2024-06-16 22:45:39 发布

阅读量61

点赞数

文章标签： css 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/l15655495902/article/details/128938653

版权

一.基本标签

标签选择器

格式：标签名{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            h1{color: red;}
        </style>
    </head>
    <body>
        <h1>文本内容</h1>
    </body>
</html>

类名选择器

格式： .类名{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .yi{color: red;}
        </style>
    </head>
    <body>
        <p>文本内容</p>
        <p class="yi">文本内容</p>
    </body>
</html>

id选择器

！：唯一标识，每个标签最多只能有一个ID值

格式： #类名{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #haha{color: red;}
        </style>
    </head>
    <body>
        <p>文本内容</p>
        <p class="yi">文本内容</p>
        <p id="haha">文本内容</p>
    </body>
</html>

通配符

选中页面中所有标签

格式：*

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{color: red;}
        </style>
    </head>
    <body>
        <p>文本内容</p>
        <p class="yi">文本内容</p>
        <p id="haha">文本内容</p>
    </body>
</html>

二.层次选择器

1.后代：选择标签1中的标签2子代

写法：标签1 标签2 { }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul li{color: red;}
        </style>
    </head>
    <body>
        <ul>
            <li>>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </body>
</html>

2.子代：选择标签1中的子代标签2

写法：标签1>标签2{ }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            ul>li{color: red;}
        </style>
    </head>
    <body>
        <ul>
            <li>>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
        </ul>
    </body>
</html>

！后代可以包含子代，子代只能是父元素的第一层

3. 元素1+元素2：选中元素1后面第一个相邻的兄弟元素

元素1~元素2：选中元素1后所有的兄弟元素

三.结构选择器

选择器1 选择器2：first-child :在元素1中选择第一个元素，并且该元素与元素2相同

<style>
            ul li:first-child{   }
 </style>

选择器1 选择器2：first-of-type ：在元素1中选中所有的同级别的元素2，再找第一个出现的元素2

<style>
            ul li:first-of-type{   }
        </style>

选择器1 选择器2：lanst-child：在选择器中选择最后一个元素，并且该元素与选择器2相同

<style>
            ul li:last-child{   }
        </style>

选择器1 选择器2：last-of-type：在元素1中反着选中所有的同级别的元素2，再找第一个出现的元素2

<style>
            ul li:last-of-type{   }
        </style>

选择器1>选择器2：nth-child（num）：在选择器1中选中第num个元素，并且该元素与选择器2中的元素相同

<style>
            ul>li:nth-child(num){   }
        </style>

6.选择器1>选择器2：nth-of-type（num）：在选择器1中反着选中第num个元素，并且该元素与选择器2中的元素相同

7.选择指定行列

选择器：not（条件）=除了符合的选择器选中的其他元素

<style>
            ul>li:not(:nt-cjild(3)){   }
        </style>

李有财.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css的选择器

在选择器1中反着选中第num个元素，并且该元素与选择器2中的元素相同。在元素1中反着选中所有的同级别的元素2，再找第一个出现的元素2。在选择器1中选中第num个元素，并且该元素与选择器2中的元素相同。：在元素1中选中所有的同级别的元素2，再找第一个出现的元素2。3. 元素1+元素2：选中元素1后面第一个相邻的兄弟元素。:在元素1中选择第一个元素，并且该元素与元素2相同。在选择器中选择最后一个元素，并且该元素与选择器2相同。元素1~元素2：选中元素1后所有的兄弟元素。：选择标签1中的子代标签2。
复制链接

扫一扫