美文网首页
css选择器组合使用

css选择器组合使用

作者: dotdiw | 来源:发表于2020-02-25 16:38 被阅读0次
  1. 后代选择器(以空格分隔)
//html=======================

    <div class="content1">
        <p>第一个p</p>
        <p>第二个p</p>
        <div><p>第三个p</p></div>
    </div>
//css=======================
div p {
background:red;
}
//div 后所有的p元素背景全是红色
  1. 子元素选择器(以大于号分隔)
//html=======================
<div class="content2">
        <div>
            <p>子元素里的p</p>
        </div>
        <p>
            直系子1
        </p>
        <p>
            直系子2
        </p>
    </div>
//css=======================
.content2>p {
    background: yellow;
}
// 只有直系子1直系子2背景变黄
  1. 相邻兄弟选择器(以加号分隔)
//html=======================
    <div>
        我是相临元素1
    </div>
    <div class="content3">
        <div>我是内容</div>
    </div>
    <div>
        我是相临元素2
    </div>
    <div>我是相临元素3</div>
    <p>我是相临元素4</p>
    <div>
        我是相临元素5
    </div>
//css=======================
.content3+div {
    background: green;
}
//只有相临元素2变绿
  1. 普通兄弟选择器(以破折号分隔)
//html=======================
    <div>
        我是相临元素1
    </div>
    <div class="content4">
        <div>我是内容</div>
    </div>
    <div>
        我是相临元素2
    </div>
    <div>我是相临元素3</div>
    <p>我是相临元素4
        <div>是我元素4-1</div>
        <p>我是元素4-2
            <div>是我元素4-2-1</div>
        </p>
    </p>
    <div>
        我是相临元素5
    </div>
//css=======================
.content4~div {
    background: blue;
}
// 只有 我的相临元素2、3、5、4-1、4-2-1颜色为蓝色
  1. 多个类共用一个样式(以逗号分隔)
//html=======================
<div>
    <div class="content5">div内容</div>
    <p class="content6">p内容</p>
    <span class="content7">span内容</span>
</div>
//css=======================
.content5,.content6,.content7 {
    color:lawngreen;
}
//  三个元素里面的内容全是亮绿色
  1. 多个元素有同一个类名如果改变当前元素当前类名的样式(以'.'连接)
//html=======================
<div>
        <div class="content8">
            我是div标签1
        </div>
        <p class="content8">
            我是p标签
        </p>
        <div class="content8">
            我是div标签2
        </div>
        <span class="content8">
            我是span标签
        </span>
</div>
//css=======================
div.content8 {
    color:lightblue;
}
//  只有div里面的字是亮蓝色

相关文章

  • CSS和JQuery选择器

    一、 基本选择器 二、组合使用 三、属性选择器 四、 CSS3属性选择器

  • web前端入门到实战:常见CSS3选择器和文本字体样式汇总

    常见的CSS3选择器包含:常用基本、属性、伪类、层级(组合)选择器,具体使用情况建议先阅读[css选择器四大类:基...

  • css--不同类型的选择器(三)

    组合器和选择器组 虽然有时候使用一个选择器就很有用,但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进...

  • CSS学习笔记

    css学习笔记 在html引入css的三种方式 css选择器 伪选择器 选择器的组合 伪类选择器 选择器的优先规则...

  • CSS 拾遗

    CSS拾遗选择器选中带有class或id的元素选中多个class选择器组合使用dom结构作为选择器层叠(Casca...

  • 【第65天】css基础汇总

    1 css语法 2 css导入样式 3 css选择器 3-1 基本选择器 3-2 组合选择器 3-3 分组和嵌套 ...

  • css入门(二)

    CSS入门(二) [TOC] 一、组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一...

  • CSS选择器

    css选择器 CSS选择器可以简单分为三类:简单选择器、伪元素选择器、组合选择器 简单选择器 标签选择器 标签选择...

  • css3(1)

    之前的css属性选择器包括:类选择器,id选择器,标签选择器,关联选择器,组合选择器,伪类选择器等 css3属性选...

  • css选择器

    一、基本选择器 实例: 二、多元素的组合选择器 实例: CSS 2.1 属性选择器 实例: CSS 2.1中的伪类...

网友评论

      本文标题:css选择器组合使用

      本文链接:https://www.haomeiwen.com/subject/kkgdyctx.html