CSS选择器

最新推荐文章于 2022-11-05 11:35:29 发布

jia-huan

最新推荐文章于 2022-11-05 11:35:29 发布

阅读量400

点赞数

分类专栏： H5 学习文章标签： css

本文链接：https://blog.csdn.net/cjh_android/article/details/51487242

版权

H5 学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本章内容

元素选择器
选择器分组
类选择器详解
ID选择器详解
属性选择器详解
后代选择器
子元素选择器
相邻兄弟选择器

元素选择器

最常见的选择器就是元素选择器，文档的元素就是最基本的选择器

例如：h1{}、a{}

选择器分组

例子：

h1、h2{}

通配符

*{}

类选择器详解

类选择器允许以一种独立与文档元素的方式来指定样式

例如：.class{}

结合元素选择器使用

例如：a.class{}
示例：

    <div class="div">hello div</div>
    <a class="div">hello a</a>

.div{
    color: brown;
}
a.div{
    color: cyan;
}

多类选择器

例如：.class.class{}
多类选择器的写法示例：

<p class="p1">p1 hello</p>
    <p class="p2">p2 hello</p>
    <p class="p1 p2">p3 hello</p>

CSS

.p1{
    color: blueviolet;
}
.p2{
    font-size: 80px;
}
.p1.p2{
    font-style: italic;
}

上面的p3，既继承了p1、p2的属性，也保留了自己的斜体属性。

ID选择器详解

ID选择器

ID选择器类似于类选择器，不过也有些重要差别
例如：#id{}

类选择器和ID选择器区别

ID只能在文档中使用一次，而类可以多次使用
ID选择器不能结合使用
当使用js时候，需要用到id

属性选择器详解

简单属性选择

例如：[title]{}

<style>
        [title]{
            color: crimson;
        }
    </style>
 <p title="">hello</p>

根据具体属性值选择

除了选择拥有某些的元素，话可以进一步缩小选择范围，只选择有特定属性值的元素
例如：a[href="http://www.baidu.com"]{}

属性和属性值必须完全匹配

根据部分属性选择

示例：

    <style>
        [title]{
            color: crimson;
        }
        [title~="title"]{
            font-size: 45px;
        }
        [href]{
            font-size: 45px;
        }
    </style>
    .....
    <body>
    <p title="tit">hello</p>
    <p title="title">hello</p>
    <p title="t">hello</p>
    <p title="title hello">hello</p>
    <a href="http://www.baicu.com">a hello</a>
</body>

效果：
这里写图片描述

在这里可以把[title~="title"]看成是一种模糊查询，找到包含了 title 的标签。

后代选择器

后代选择器可以选择作为某元素后代的元素
例如：

<p>this is my<strong> web <i>page</i></strong></p>

p strong i{
    color: blueviolet;
}

效果：

这里写图片描述

子元素选择器

与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素

例如：h1>strong{}
区别：

<body>
    <p class="p1">this is my<strong> web <i>page</i></strong></p>
    <p class="p2">this is my<strong> web <i>page</i></strong></p>
    <p class="p3">this is my<strong> web <i>page</i></strong></p>
    <p class="p4">this is my<strong> web <i>page</i></strong></p>
</body>

.p1 strong i{
    color: blueviolet;
}
.p2>strong>i{
    color: blueviolet;
}
.p3 i{
    color: blueviolet;
}
.p4>i{
    color: blueviolet;
}

效果：

这里写图片描述

可以看出直接使用子元素选择器找 i 是找不到，如果使用子元素选择器必须先找到 i 的父元素，或者使用后代选择器也可以找到

相邻兄弟选择器

可选择紧接在另一个元素后的元素，且二者有相同父元素

例如：h1+p{}

<body>
    <div>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
        </ul>
        <ol>
            <li>item11</li>
            <li>item22</li>
            <li>item33</li>
        </ol>
    </div>
</body>