CSS3：常用选择器

最新推荐文章于 2024-01-18 10:00:51 发布

原创最新推荐文章于 2024-01-18 10:00:51 发布 · 180 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

HTML5+CSS3 专栏收录该内容

2 篇文章

订阅专栏

CSS3：常用选择器

css选择器：

常用选择器
- 元素选择
- id选择
- 类选择
- 通配选择
复合选择器
关系选择器
属性选择器
伪类与伪元素

1.常用选择器

①元素选择

【元素标签名】{}

    <style>
        /* 1.元素选择器 */
        span {
            background-color: yellow;
        }

        div {
            background-color: blueviolet;
        }  
    </style>

    <span>span</span>
    <div>div</div>

②id选择

#【id名】{}
该选择器一般具有唯一性

    <style>
        /* 2.id选择器 */
        #span1 {
            background-color: blueviolet;
        }
    </style>

    <span id="span1">span</span>
    <div id="span1">div</div>

id一般规定具有唯一性，但是如果出现相同id的情况，浏览器还是可以正常进行选择，选择所有具有目标id的元素。
但是实际开发还是不要出现重复id的情况。

③类选择

.【类名】{}

    <style>
        /* 3.类选择器 */
        .span1 {
            background-color: blueviolet;
        }

        .div {
            background-color: yellow;
            font-size: 40px;
        }
    </style>

    <span class="span1">span</span>
    <div class="div">
        div
    </div>
    <div class="div">
        <div>div</div>
    </div>

④通配选择

*{}

	<style>
        /* 4.通配选择器 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    
    <span class="span1">span</span>
    <div class="div">
        div
    </div>
    <div class="div">
        <div>div</div>
    </div>

多用来选择父元素内所有的子元素，经常用来清除浏览器默认的一些样式，如默认的margin和padding等。

2.复合选择器

①交集

    <style>
        /* 交集 */
        div.blue {
            background-color: blue;
        }

        div.red {
            background-color: red;
        }
    </style>

    <div class="blue">
        blue
    </div>
    <div class="red">
        red
    </div>

②并集

多个选择用,隔开

    <style>
        /* 并集 */
        .blue,
        .red {
            font-size: 60px;
        }
    </style>

    <div class="blue">
        blue
    </div>
    <div class="red">
        red
    </div>

3.关系选择器

①子元素选择

【父元素】>【子元素】

    <style>
        /* 子元素选择 */
        .parent>.children {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
    </style>

<body>
    <div class="parent">
        <div class="sibling1"></div>
        <div class="children">
            <div class="offspring"></div>
        </div>
        <div class="sibling2"></div>
    </div>
</body>

②后代选择

【祖先元素】空格【后代元素】
会选择所有符合条件的后代元素，不仅仅是子元素

    <style>
        /* 后代选择 */
        .parent div {}
    </style>

<body>
    <div class="parent">
        <div class="sibling1"></div>
        <div class="children">
            <div class="offspring"></div>
        </div>
        <div class="sibling2"></div>
    </div>
</body>

③兄弟选择

下一个兄弟元素
【选择1】+【选择2】
以符合【选择1】条件下的元素为基准，选取下一个符合【选择2】的兄弟元素
eg：.children + div{}
选择class为children的下一个div标签
注：即使有多个符合条件，也只选择最近的一个
下边所有兄弟元素
【选择1】~【选择2】
以符合【选择1】条件下的元素为基准，选取所有符合【选择2】的兄弟元素
eg：.children ~ div{}

4.属性选择器

【】【属性】存在某个属性
【】【属性=‘a’】该属性值为a
【】【属性^=‘a’】该属性值以a开头
【】【属性$=‘a’】该属性值以a结尾
【】【属性*=‘a’】该属性值存在a
注意之间没有空格

    <style>
        p[title] {
            font-size: 36px;
        }

        p[title='a'] {
            color: red;
        }

        p[title^='ab'] {
            color: royalblue;
        }

        p[title$='ab'] {
            color: yellow;
        }

        p[title*='abc'] {
            color: green;
        }
    </style>

<body>
    <p>no title</p>
    <div>
        <p title="a">title='a'</p>
        <p title="abxxx">title^='ab'</p>
        <p title="xxxab">title$='ab'</p>
        <p title="xxxabcxxx">title*='ab'</p>
    </div>
</body>

在这里插入图片描述

5.伪类与伪元素

①伪类

    <style>
        .inner {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        .outer :first-child {
            background-color: red;
        }

        .outer :last-child {
            background-color: blue;
        }
    </style>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>

②伪元素

<style>
        .outer::before {
            content: 'abc';
        }

        .outer::after {
            content: 'xyz';
        }
    </style>

<body>
    <div class="outer">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
    </div>
</body>