精华内容
下载资源
问答
  • CSS复合选择器

    2021-01-22 22:33:52
    文章目录一、CSS复合选择器分类二、各复合选择器语法1.后代选择器总结 今天学习CSS的复合选择器,之前学习过了基础选择器,CSS的复合选择器在基础选择器的基础上,可以更方便地选取对象,使得利用CSS时更方便灵活。...


    今天学习CSS的复合选择器,之前学习过了基础选择器,CSS的复合选择器在基础选择器的基础上,可以更方便地选取对象,使得利用CSS时更方便灵活。


    一、CSS复合选择器分类

    CSS复合选择器分为后代选择器、子选择器、并集选择器及伪类选择器。

    二、各复合选择器语法

    1.后代选择器

    后代选择器便于同时选择某标签中多个子标签进行样式声明。
    可以选择父元素里的子元素;也可以选择父元素里子元素的子元素,依次类推,只是使用时要将选择的元素的每层上级元素都写上。
    可以选择任意基础选择器使用。

    【语法】
    在这里插入图片描述

    2.子选择器

    子选择器只选择某元素最近一级子元素。

    【语法】
    在这里插入图片描述

    3.并集选择器

    并集选择器可以同时选择多个标签统一修改样式,将各标签用逗号隔开,标签可以用任意基础选择器。

    4.伪类选择器

    伪类选择器用于向某些选择器添加样式,使用冒号(:)表示。

    链接伪类选择器

    语法 意义
    a:link 选择所有未被访问过的链接
    a:visited 选择所有已被访问过的链接
    a:hover 选择鼠标放在上面的链接
    a:active 选择鼠标按住的链接

    【注意】使用时需要按照LVHA的顺序来声明,否则会无效;链接需要单独指定样式。

    :focus伪类选择器

    用于选取获得光标的表单元素,一般用于< input >类表单元素。

    【语法】
    在这里插入图片描述

    展开全文
  • css复合选择器

    2021-04-21 18:31:46
    css复合选择器分类 css复合选择器分为:后代选择器、子选择器、复合选择器、伪类选择器、:focus选择器 后代选择器:元素 下面包含的任意元素{…} 子选择器:元素 下面包含的第一层元素{…} 复合选择器:元素, 元素{...

    css复合选择器分类

    css复合选择器分为:后代选择器、子选择器、复合选择器、伪类选择器、:focus选择器

    后代选择器:元素 下面包含的任意元素{…}

    子选择器:元素 下面包含的第一层元素{…}

    复合选择器:元素, 元素{…}

    伪类选择器:主要用于链接,a:链接状态{…}

    :focus选择器:跟表单有关,选择获得光标的表单,input:focus{…}

    注意:a:link a:visited a:hover a:active 一定不能换顺序,否则样式不生效,可以4个不写全,实际中常用a {} a:hover{}定义链接样式。以及鼠标经过链接时的样式,即可

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>css复合选择器</title>
        <style>
            /* 后代选择器 */
            
            .fruit p {
                color: pink;
            }
            
            .fruit li {
                color: purple;
            }
            /* 子选择器 */
            
            .fruit .youlike {
                color: powderblue;
            }
            /* 并集选择器 */
            
            .season,
            .spring {
                color: seagreen;
            }
            /* 链接伪类选择器 */
            
            a:link {
                color: seagreen;
            }
            
            a:visited {
                color: sienna;
            }
            
            a:hover {
                color: skyblue;
            }
            
            a:active {
                color: brown;
            }
        </style>
    </head>
    
    <body>
        <div class="carton">
            <a href="#">海绵宝宝</a>
            <ol>
                <li><a href="#">小猪佩奇</a></li>
                <li>熊大</li>
                <li>熊二</li>
            </ol>
        </div>
        <div class="fruit">
            <p class="youlike">你喜欢的水果是?</p>
            <ul>
                <p class="ilike">我喜欢的水果是:</p>
                <li>苹果</li>
                <li>橙子</li>
                <li>芒果</li>
                <p>你呢?</p>
            </ul>
        </div>
        <div>
            <p class="season">你喜欢的季节是?</p>
            <ul>
                <p>我喜欢的季节是:</p>
                <li class="spring"></li>
                <li class="summer"></li>
                <li></li>
                <li></li>
                <p>你呢?</p>
            </ul>
        </div>
    </body>
    
    </html>
    
    展开全文
  • CSS 复合选择器

    2021-06-23 14:42:22
    文章目录CSS 复合选择器交集选择器并集选择器后代选择器子元素选择器属性选择器伪元素选择器 CSS 复合选择器 交集选择器 交集选择器有两个或者多个选择器勾陈个,其中第一个为标签选择器,第二个为class选择器,两个...

    CSS 复合选择器

    交集选择器

    交集选择器有两个或者多个选择器勾陈个,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,(如h3.special)
    交集选择器
    记忆技巧:
    交集选择器是比用且的意思,即…又…意思

    比如: p.one 选择的是:类名为.one的段落标签。

    在这里插入图片描述

    并集选择器

    并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(class、id、标签)都可以作为并集选择器的一部分。如何某些选择器定义的样式完全相同或者部分相同就可以使用并集选择器为它们定义相同的CSS样式。
    在这里插入图片描述
    记忆技巧:
    并集选择器是 和 的意思,就是说,只要是逗号隔开的,所有选择器都会执行后面的样式。

    比如 .one, p, #test{color : redf} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
    在这里插入图片描述

    后代选择器

    后代选择器又称为包含选择器,用来选择元素或者元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。当标签发生嵌套时,内层标签就称为外城标签的后代。
    在这里插入图片描述
    在这里插入图片描述

    子元素选择器

    子元素选择器智能选择作为某元素子元素的元素,器械发就是把父级标签写在前面,子集标签写在后面中间跟一个>进行连接 注意:符号左右两侧各保留一个空格
    在这里插入图片描述
    在这里插入图片描述

    属性选择器

    选取标签带有某些特殊属性的选择器。

    选择器 含义
    E[attr] 勋在attr属性即可
    E[attr = val] 属性值完全等于val
    E[attr *= val] 属性值里包含val字符并且存在于任意位置
    E[atr] ^= val 属性值里包含val字符并且存在于开始位置
    E[attr $= val] 属性值里包含val字符并且存在于结束位置

    在这里插入图片描述
    在这里插入图片描述

    伪元素选择器

    1. E::first-letter 文本的第一个单词或字
    2. E::first-line 文本的第一行
    3. E:: selection 可改变选中文本样式
    4. E::before和E::after
      在E元素内部的开始位置和结束位置创建一个元素,该元素为行内元素,且必须要结合content属性使用。
    div::before{
    	content: "开始";
    }
    div::after{
        content: "结束";
    }
    
    展开全文
  • css 复合选择器

    2020-06-21 14:59:28
    复合选择器: 后代选择器 元素1 元素2 { } 表示选择元素1里面所有元素2 元素1元素2之间用空格隔开 元素3 元素4以此类推 子选择器: 元素1>元素2{ } 只选择元素1最近一级元素2 并集选择器: 元素1,元素2{ } ...

    复合选择器:
    后代选择器
    元素1 元素2 { }
    表示选择元素1里面所有元素2 元素1元素2之间用空格隔开 元素3 元素4以此类推

    子选择器:
    元素1>元素2{ }
    只选择元素1最近一级元素2

    并集选择器:
    元素1,元素2{ } 
    选择多组标签,同时为他们定义相同的样式

    伪类选择器:
    链接伪类
    a:link 选择没被访问的链接
    a:visited 访问过
    a:hover 指针位于链接上
    a:active 活动链接(鼠标一直按着没松开的链接)
    要按照顺序声明
    向某些选择器添加特殊的效果

    focus伪类
    选取获得焦点(光标)的表单元素
    input:focus{ }


     

    展开全文
  • CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器,以上具体的使用如下,感兴趣的朋友可以学习下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,391
精华内容 6,556
关键字:

css复合选择器