CSS选择器归纳

最新推荐文章于 2024-04-25 19:43:22 发布

步入飞花

最新推荐文章于 2024-04-25 19:43:22 发布

阅读量108

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_42646178/article/details/119351771

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

选择器归纳

1.通用选择器和元素选择器

通用选择器：使用*选中所有的HTML元素，一般用于去除元素的默认样式如内外边距
元素选择器：使用HTML元素选中所有的HTML元素
案例：设置div元素并且设置字体色为蓝色

    <style>
        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
        div {
            color: blue;
        }
        header {
            width: 100%;
            height: 100px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <!-- ID选择器 -->
    <div id="box1">ID选择器</div>
    <!-- 类选择器 -->
    <div class="box2">类选择器</div>
    <header></header>
</body>

效果：
在这里插入图片描述
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera

2.ID选择器和类选择器

ID选择器：HTML的元素通过设置id属性来设置ID选择器
案例：设置ID选择器并且设置背景色为红色

<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
</head>
<body>
    <!-- ID选择器 -->
    <div id="box1"></div>
</body>

效果：
在这里插入图片描述
类选择器：HTML的元素通过设置id属性来设置ID选择器
案例：设置ID选择器并且设置背景色为绿色

    <style>
        .box2 {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <!-- 类选择器 -->
    <div class="box2">类选择器</div>
</body>

效果：
在这里插入图片描述
ID选择器特长用于特定的元素，一般是唯一的，而类选择器通常用于设置一组元素

3.层次选择器

3.1后代选择器

案例：给header所有的div设置背景色为红色

    <style>
        #box1 {
            background-color: red;
        }
        .box2 {
            background-color: green;
        }
        div {
            width: 100px;
            height: 100px;
            color: blue;
        }
        header {
            width: 100%;
            height: 400px;
            background-color: cadetblue;
        }
        /* 后代选择器 */
        /* 给header所有的div设置背景色为红色 */
        header div {
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- ID选择器 -->
    <div id="box1">ID选择器1</div>
    <!-- 类选择器 -->
    <div class="box2">类选择器1</div>
    <header>
        <div class="box3">类选择器2</div>
        <div class="box4">类选择器3</div>
        <span>标题</span>
    </header>
</body>

效果：
在这里插入图片描述
浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera

3.2子选择器

选择的是后代亲儿子，隔代的话会起作用
案例：给header所有子代的div设置文字颜色为白色

    <style>
        #box1 {
            background-color: red;
        }
        .box2 {
            background-color: green;
        }
        div {
            width: 100px;
            height: 100px;
            color: blue;
        }
        header {
            width: 100%;
            height: 400px;
            background-color: cadetblue;
        }
        /* 后代选择器 */
        /* 给header所有的div设置背景色为红色 */
        header div {
            background-color: red;
        }
        /* 子代选择器，不对隔代起作用 */
        header > div {
            color: white;
        }
    </style>
</head>
<body>
    <!-- ID选择器 -->
    <div id="box1">ID选择器1</div>
    <!-- 类选择器 -->
    <div class="box2">类选择器1</div>
    <header>
        <div class="box3">类选择器2</div>
        <div class="box4">类选择器3
            <div class="box5">类选择器4</div>
        </div>
        <span>标题</span>
    </header>
</body>

效果：
在这里插入图片描述
浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera

3.3相邻兄弟选择器

相邻兄弟选择器，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。
用法：

    <style>
        /* 相邻兄弟选择器: 元素需要相邻而不是离它最近的兄弟元素 */
        /* 选取box2的相邻兄弟，设置背景颜色为黑色 */
        .box2 + div {
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- ID选择器 -->
    <div id="box1">ID选择器1</div>
    <!-- 类选择器 -->
    <div class="box2">类选择器1</div>
    <div class="box5">类选择器5</div>
</body>

效果：
在这里插入图片描述
浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera

3.4后续同胞选择器

后续同胞选择器使用 ~ 表示，选择一个元素后面同属一个父元素的另一个元素。这个选择器和 X + Y 很像，但没那么严格。后续同胞选择器应用会更广泛。比如下面这个例子，我们选择所有ul后面的P元素。

    <div id="container">
        <ul>
            <li> List Item
                <ul>
                    <li> Child </li>
                </ul>
            </li>
            <li> List Item </li>
            <li> List Item </li>
            <li> List Item </li>
        </ul>
        <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
        <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
    </div>
</body>

效果：
在这里插入图片描述
浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera

4.链接伪类选择器

:link 伪类来定义所有还没有点击链接的样式，:visited 伪类定义我们曾经点击过或者访问过的链接样式，示例代码如下：

a:link { color: red; }
a:visted { color: purple; }

浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera

5.元素属性选择器

通过元素指定属性从而指定对应的元素
用法：

a[title] {
 color: green;
}

浏览器兼容性：
IE7+
Firefox
Chrome
Safari
Opera

6.伪类选择器

CSS伪类是用来添加一些选择器的特殊效果。

6.1anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

6.2first-child 伪类

可以使用 :first-child 伪类来选择父元素的第一个子元素。其它用法可以参照下图
在这里插入图片描述

7.伪元素选择器

可以使用伪元素（用::表示）来定义某些片段元素，比如第一行或第一个字母。要记住的是这只能用于块状（block）元素。

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

比如我们要匹配段落的第一行内容：

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

浏览器兼容性：
IE6+
Firefox
Chrome
Safari
Opera

伪类和伪元素的区别

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。
伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

步入飞花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器归纳

选择器归纳1.通用选择器和元素选择器通用选择器：使用*选中所有的HTML元素，一般用于去除元素的默认样式如内外边距元素选择器：使用HTML元素选中所有的HTML元素案例：设置div元素并且设置字体色为蓝色 <style> #box1 { width: 100px; height: 100px; background-color: red; } .box2 {
复制链接

扫一扫