CSS中的选择符（C3）

最新推荐文章于 2022-08-09 19:06:46 发布

前端～段坤

最新推荐文章于 2022-08-09 19:06:46 发布

阅读量481

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45824120/article/details/105633216

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

选择符的运用会让你减轻对标识类选择符取名的困扰，例如：（class="" ,id=""）,特别是class。也可让你对一些简单的动画效果，不必大费周章去写个脚本，例如：移入移出效果，点击后会怎么样等。。。

选择符（Selectors）分类

元素选择符
通配符* ，元素类型E(例如：div{} , li{}) ，类class(.类名{}) ，ID{#唯一名{}}
上面的使用在学习C2S时就是经常被运用的

	--通配符选择符的运用一般给元素设置统一样式时使用，例如文本样式，margin padding的偏移量等
	
	--元素类型选择符配合关系选择符会比较好，一般用来设置统一样式，例如ul 下的li( ul li{})这样就不用给每个li设置class了
    
    --class,id都是用来标识元素的，但class可以设置多个，而id只能设置一个（最好），当你id名相同时，设置的样式一样会显示出来，但我还不如用class。对吧！

示例：
在这里插入图片描述

关系选择符
兄弟选择符 ~

只会将选中自身身后的所有兄弟，并且必须是同一父类

示例：当我选取自身兄弟元素时，只有和h4同辈被改变了，自身以及比自己打的以及同辈子类都不会变化

在这里插入图片描述

属性选择符
E[att^=“val”] ：选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$=“val”]：选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*=“val”]：选择具有att属性且属性值为包含val的字符串的E元素。

示例：
在这里插入图片描述

伪类选择符
C3中添加很多伪类选择符去对元素进行查找，以及改变元素状态的伪类。

主要讲下 E:target 匹配相关URL指向的E元素
如果你想学习其他C3伪类，可上http://css.doyoe.com/

也就是URL后面跟锚点# ，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)，:target选择器用于选取当前活动的目标元素。

写个案例可能会更加直观：

<body>
    <a href="#red">红</a>
    <a href="#yellow">黄</a>
    <a href="#blue">蓝</a>
    <a href="#green">绿</a>

    <div id="red"></div>
    <div id="yellow"></div>
    <div id="blue"></div>
    <div id="green"></div>
</body>

<style>
        body {
            margin: 0;
        }

        a[href] {
            display: inline-block;
            text-decoration: none;
            border: 2px black;
            border-style: outset;
            padding: 0px 10px;
            margin: 5px;
            position: relative;
            z-index: 100;
        }

        div {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
		//当我点击a标签href="#red",目标元素id="red"的div被选中,盒子的背景颜色变为红色。
        #red:target {
            background-color: red;
        }
		
        #yellow:target {
            background-color: yellow;
        }

        #blue:target {
            background-color: blue;
        }

        #green:target {
            background-color: green;
        }

        div:active{
            background-color: #fff;
        }
    </style>

效果:
当我点击红时，屏幕会变红，点击黄时，屏幕会变黄，点击其他位置会变白
在这里插入图片描述

伪对象选择符
主要讲下::before，::after,他们在C2时就存在了，到了C3时它们被做了些修改。
C3主要将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors)，但以前的写法仍然有效。
- ::before :设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
- ::after:设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用

这里我们就列举两个例子来实现个个简单效果（这只是单单的视觉效果）
在这里插入图片描述
点击后：