CSS选择器之基本选择器及其扩展

最新推荐文章于 2022-10-09 16:21:15 发布

Blockchain Explorer

最新推荐文章于 2022-10-09 16:21:15 发布

阅读量260

点赞数

分类专栏： CSS/CSS3 文章标签：基本选择器子元素选择器相邻兄弟选择器通用兄弟选择器选择器分组

本文链接：https://blog.csdn.net/TDCQZD/article/details/82355984

版权

CSS/CSS3 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、基本选择器

1.基本选择器

/*通配符选择器*/      * { margin: 0; padding: 0; border: none; }
/*元素选择器*/       body { background: #eee; }
/*类选择器*/            .list { list-style: square; }
/*ID选择器*/           #list { width: 500px; margin: 0 auto; }
/*后代选择器*/       .list li { margin-top: 10px; background: #abcdef; }

2、代码实例：

<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
/*通配符选择器*/
* { margin: 0; padding: 0; border: none; }
/*元素选择器*/
body { background: #eee; }
/*类选择器*/
.list { list-style: square; }
/*ID选择器*/
#list { width: 500px; margin: 0 auto; }
/*后代选择器*/
.list li { margin-top: 10px; background: #abcdef; }
/*选择器分组*/
#list,.second{background: pink;}
</style>
</head>
<body>
<ul id="list" class="list">
    <li class="first">1</li>
    <li class="second">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>

二、基本选择器扩展

1、基本选择器扩展

/*子元素选择器*/      #wrap > .inner {color: pink;}
        也可称为直接后代选择器,此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素
/*相邻兄弟选择器*/ #wrap #first + .inner {color: #f00;}
        它只会匹配紧跟着的兄弟元素
/*通用兄弟选择器*/ #wrap #first ~ div { border: 1px solid;}
        它会匹配所有的兄弟元素(不需要紧跟)
/*选择器分组*/       h1,h2,h3{color: pink;}  
        此处的逗号我们称之为结合符

2、代码实例：
02_子元素选择器.html

<head>
<meta charset="UTF-8">
<title>子元素选择器</title>
<!--我们也可以称它为直接后代选择器-->
<style type="text/css">
#wrap > .inner {
    /*color: pink;*/
    border: 1px solid;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="inner">
        wrap下一层
        <div class="inner">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;最里层</div>
    </div>
    <div class="inner">wrap下一层</div>
    <div class="inner">wrap下一层</div>
    <div class="inner">wrap下一层</div>
</div>
</body>

03_相邻兄弟选择器.html

<head>
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<!--
    这被称为一个相邻兄弟选择器. 它只会匹配紧跟着的兄弟元素

    紧跟！！！！
-->
<style type="text/css">
#wrap > #first + .inner {
    color: #f00;
}
</style>
</head>
<body>
<div id="wrap">
    <div class="inner">inner</div>
    <div id="first">first</div>
    <div></div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
</div>
</body>

04_通用兄弟选择器.html

<head>
<meta charset="UTF-8">
<title>通用兄弟选择器</title>
<!--
    在使用 ~ 连接两个元素时,它会匹配第二个元素,
        条件是
            它必须跟(不一定是紧跟)在第一个元素之后,
            且他们都有一个共同的父元素
-->
<style type="text/css">
#wrap #first ~ div {
    border: 1px solid;
    /*color: pink;*/
}
</style>
</head>
<body>
<div id="wrap">
    <div id="first">first</div>
    <p></p>
    <div class="inner">inner <div>inner2</div></div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
    <div class="inner">inner</div>
</div>
</body>

05_分组.html

<head>
<meta charset="UTF-8">
<title>选择器分组</title>
<style type="text/css">
h1,h2,h3{
    color: pink;
}
</style>
</head>
<body>
<div>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
</div>
</body>