H5基础：选择器

Tao13197

于 2024-09-04 10:11:48 发布

阅读量349

点赞数 10

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_60897029/article/details/141885998

版权

基本选择器的分类标签 id class 通配符群组选择器

1. id 选择器

语法

1 需要在标签中加入id属性属性值可以随便最好语义化

2 在样式中通过 #id属性值{}

2. class 选择器

语法

1 需要在标签中加入class属性属性值可以随便最好语义化

2 在样式中通过 .class属性值{}

3. 通配符选择器

语法

*{}

4. 群组选择器

语法

选择器1，选择器2{}

1.后代选择器(包含选择器)

什么时候用? 想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子....)的时候

语法:父元素子元素{} 例如 div p0{}

2.子选择器

什么时候用?想要改变某个父元素下面所有的儿子元素的时候。

语法: 父元素>子元素{} 例如 ul>li{}

3.相邻兄弟选择器

什么时候用?想要改变某个元素后面紧挨着的元素的时候，语法: 某某1+某某2{} 例如 div+p0{}

4.通用兄弟选择器

什么时候用?想要改变某个元素后面所有的元素的时候A.语法: 某某1~某某2{} 例如 div~p0B{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        ul li i {
            color: bisque;
        }
        ul>li {
            background-color: aqua;
        }

        p+div{
            color: rebeccapurple;
        }
        /* 改变紧挨着的一个 */
    </style>
</head>
<body>
    <!-- 基本选择器的分类 标签 id class 通配符 群组选择器
        1. id 选择器
        语法
            1 需要在标签中加入id属性 属性值可以随便 最好语义化
            2 在样式中通过 #id属性值{}

        2. class 选择器
        语法
            1 需要在标签中加入class属性 属性值可以随便 最好语义化
            2 在样式中 通过 .class属性值{}

        3. 通配符选择器
        语法 
            *{}

        4. 群组选择器
        语法 
            选择器1，选择器2{} 
    -->

    <!-- 
    1.后代选择器(包含选择器)
        什么时候用? 想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子....)的时候
        语法:父元素 子元素{} 例如 div p0{}
    2.子选择器
        什么时候用?想要改变某个父元素下面所有的儿子元素的时候。
        语法: 父元素>子元素{} 例如 ul>li{}
    3.相邻兄弟选择器
        什么时候用?想要改变某个元素后面紧挨着的元素的时候，语法: 某某1+某某2{} 例如 div+p0{}
    4.通用兄弟选择器
        什么时候用?想要改变某个元素后面所有的元素的时候A.语法: 某某1~某某2{} 例如 div~p0B{}
    -->
        <ul>
        <li>1
            <i>倾斜</i>
        </li>
        <li>2</li>
        <li>3</li>
    </ul>

    <p>哥哥</p>
    <div>弟弟</div>
</body>
</html>

Tao13197

关注

10
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5基础：选择器

想要改变某个元素后面所有的元素的时候A.语法: 某某1~某某2{} 例如 div~p0B{}想要改变某个元素后面紧挨着的元素的时候，语法: 某某1+某某2{} 例如 div+p0{}想要改变某个父元素下面所有的后代元素(包括儿子,孙子,重孙子....)的时候。想要改变某个父元素下面所有的儿子元素的时候。语法:父元素子元素{} 例如 div p0{}语法: 父元素>子元素{} 例如 ul>li{}基本选择器的分类标签 id class 通配符群组选择器。选择器1，选择器2{}2. class 选择器。
复制链接

扫一扫