CSS3选择器

最新推荐文章于 2022-04-14 11:54:40 发布
最新推荐文章于 2022-04-14 11:54:40 发布
阅读量280 收藏
点赞数
分类专栏： CSS3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44584442/article/details/105006746
版权

目录

一、Relationship Selectors（关系选择器）

二、Attribute Selectors（属性选择器）

三、Pseudo-Element Selectors(伪元素选择器)

四、pseudo-classes(伪类选择器)——被选则元素的一种状态

1.基本过滤选择器

2.子元素过滤选择器

 3.内容过滤选择器

4.表单对象属性过滤选择器

一、Relationship Selectors（关系选择器）

E + P：选择下一个满足条件的兄弟元素节点

E ~ P：选择所有满足条件的兄弟元素节点

<html lang="en">
<head>
    <style>
        *{
            margin: 10px 10px ;
        }
        div {
            float: left;
            margin-right: 5px;
        }
        div + p {
            color: #fff;
        }
        div ~ p {
            background-color: #ca0a16;
        }
        p, span {
            width: 50px;
            margin-left: 2px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            display: block;
            float: left;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>1</p>
    <p>2</p>
    <span>span</span>
    <p>3</p>
</body>
</html>

【结果】

二、Attribute Selectors（属性选择器）

E[attr~="val"]：选择满足条件的属性值中含有独立val的元素

<html lang="en">
<head>
    <style>
        div {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        div[class ~= "a"] {
            background-color: teal;
        }
    </style>
</head>

<body>
    <div class="a">1</div>
    <div class="ab">2</div>
    <div class="a b">3</div>
</body>
</html>

【结果】

E[attr |= "val"]：选中满足条件的且属性值以“val”开头或者“val-”的元素

<html lang="en">
<head>
    <style>
        div {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        div[class |= 'a'] {
            background-color: #ca0a16;
        }
    </style>
</head>

<body>
    <div class="a">1</div>
    <div class="a-test">2</div>
    <div class="b-test">3</div>
    <div class="b-a-b">4</div>
</body>
</html>

【结果】

 E[attr ^= "val"]：选择满足条件的且属性值以val开头的元素

E[attr $= "val"]：选择满足条件的且属性值以val结尾的元素

<html lang="en">
<head>
    <style>
        div {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        div[class ^= 'a'] {
            background-color: #ca0a16;
        }
        div[class $= 'st'] {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="a">1</div>
    <div class="a-test">2</div>
    <div class="ba">3</div>
</body>
</html>

【结果】

 E[attr *= "val"]：选择满足条件的属性值中含有val的元素

<html lang="en">
<head>
    <style>
        div {
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }
        div[class *= 'a'] {
            background-color: #ca0a16;
        }

    </style>
</head>

<body>
    <div class="a">1</div>
    <div class="a-test">2</div>
    <div class="ba">3</div>
    <div class="b">4</div>
</body>
</html>

【结果】

三、Pseudo-Element Selectors(伪元素选择器)

E::placeholder 不太好解释，用代码说明吧

<html lang="en">
<head>
    <style>
        input::placeholder {
            color: teal;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
</body>
</html>

【注】placeholder只可改变颜色这一个属性

【结果】

E::selection：代码说明+1

<html lang="en">
<head>
    <style>
        div {
            margin-bottom: 5px;
        }
        .jwh::selection {
            background-color: #424242;
            color: steelblue;
        }
        .zal::selection {
            background-color: slategray;
            color: #424242;
        }
    </style>
</head>
<body>
    <div class="jwh">JWH:我们不是一个世界的人</div>
    <div class="zal">张爱玲:如果是龙，也是两张画上的，纵然两幅画卷在一起，也还是两张画上的，各归各</div>
    <div>总结：我没有文化</div>
</body>
</html>

【注】只能改变颜色和背景颜色两个属性

四、pseudo-classes(伪类选择器)——被选则元素的一种状态

1.基本过滤选择器

E:not()：选择除满足括号内条件的E元素，常用于列表最后一个元素不设置底边线

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        ul {
            margin: 0;
            padding: 0 5px;
            list-style: none;
            width: 300px;
            border: 1px solid #999;
            background-color: #fcc;
        }
        li {
            height: 80px;
            line-height: 80px;
            padding:  0 20px;
            color: #fff;
            font-size: 20px;
        }
        li:not(:last-of-type) {
            border-bottom: 1px solid #999;
        }
    </style>
</head>
<body>
    <ul>
        <li>红玫瑰与白玫瑰</li>
        <li>花凋</li>
        <li>年轻的时候</li>
        <li>殷宝滟送花楼会</li>
        <li>桂花蒸 阿小悲秋</li>
    </ul>
</body>
</html>

 【结果】

 :root：选择根节点，html文件中，该选择器等于html标签选择器，xml文件同理，举例在下例中

E:target：先举例再说明吧

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* :root实例 */
        /* 该方法可以使height:100%继承给后代 */
        :root,body {
            margin: 0;
            height: 100%;
        }
        .btnWrap {
            position: absolute;
            top: 20px;
            left: 50%;
            margin-left: -115px;
        }
        .btnWrap a {
            text-decoration: none;
            background-color: thistle;
            color: #fff;
            font-size: 24px;
            padding: 5px 10px;
            border-radius: 5px;
        }
        div[id] {
            width: 100%;
            height: 100%;
        }
        #blue {
            background-color: slategrey;
        }
        #black {
            background-color: #424242;
        }
        #pink {
            background-color: #fcc;
        }
        /* :target可选中location.hash 的值为id值的元素，即被锚点标记*/
        div[id]:not(:target) {
            display: none;
        }
    </style>
</head>
<body>
    <div class="btnWrap">
        <a href="#blue" class="bgblue">blue</a>
        <a href="#black" class="bfblack">black</a>
        <a href="#pink" class="bgpink">pink</a>
    </div>
    <div id="blue"></div>
    <div id="black"></div>
    <div id="pink"></div>
</body>
</html>

【结果】 

2.子元素过滤选择器

E:first-child：如果E是某元素的第一个子元素，则将样式赋予E

【例1】

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            width: 50px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center;
            margin-left: 3px;
        }
        p:first-child {
            background-color: slategrey;
        }
    </style>
</head>
<body>
    <p class="demo">0</p>
    <div>
        <p class="test">1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>
</html>

 【结果】class为demo的p元素是body的第一个子元素，class为test的p元素是div的第一个子元素，因此将样式赋予它俩

【例2】

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p,span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            float: left;
            text-align: center;
            margin-left: 3px;
            margin-top: 10px;
        }
        span {
            display: block;
        }
        p:first-child {
            background-color: slategrey;
        }
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>
</html>

 【结果】因为p元素不是div的第一个子元素，因此不赋予样式

E:last-child：与:first-child同理

E:only-child：若E是某元素的唯一一个子元素，则赋予样式

【例】

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            margin-left: 3px;
        }
        p:only-child {
            background-color: steelblue;
        }
    </style>
</head>
<body>
    <div>
        <p>1</p>
    </div>
    <p>2</p>
</body>
</html>

【结果】因为内容为1的p元素是div唯一一个子元素，因此赋予样式，而内容是2的元素还有兄弟元素div，即不是body唯一的子元素，因此不赋予样式

 

E:nth-child(n)：若E在其兄弟节点中排第n位，则将样式赋予E

【注】n为自然数，从0开始计数，css从1开始计数

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        p,span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            margin: 20px 5px;
        }
        span {
            display: block;
        }
        p:nth-child(2n) {
            background-color: steelblue;
            color: #fff;
        }
        p:nth-child(2n+1) {
            background-color: #333;
            color: #faa;
        }
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>
</html>

【结果】给在兄弟节点中排偶数位的p元素设置背景颜色steelblue，字体颜色白色，奇数位的p元素设置背景颜色黑色，字体颜色位粉色，而第一个子元素span则不带它玩

 

E:nth-last-child(n)：与nth-child(n)倒序

【例】

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div::after {
            content: '';
            display: block;
            clear: both;
        }
        p,
        span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            float: left;
            margin: 20px 5px;
        }
        span {
            display: block;
        }
        p:nth-child(2n) {
            background-color: steelblue;
            color: #fff;
        }
        p:nth-last-child(2n) {
            border-radius: 10px;
            background-color: tan;
            color: #424242;
        }
    </style>
</head>

<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>

</html>

【结果】

type系列选择器均在与E同类型的兄弟元素中进行选择

E:first-of-type

E:last-of-type

E:only-of-type

E:nth-of-type(n)

E:nth-of-last-type(n)

【例】

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            margin: 10px;
        }
        span,p {
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            margin-right: 5px;
            background-color: thistle;
            float: left;
            color: #fff;
        }
        span {
            display: block;
        }
        p:first-of-type {
            background-color: slategray;
        }
        p:last-of-type {
            background-color: #333;
        }
        span:only-of-type {
            background-color: teal;
        }
        p:nth-of-type(2n) {
            border: 2px solid steelblue;
        }
        p:nth-of-type(2n+1) {
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div>
        <span>0</span>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
</body>
</html>

【结果】

 3.内容过滤选择器

E:empty：选择内容完全为空的E

【例】

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: steelblue;
            float: left;
            margin-left: 5px;
            position: relative;
        }
        span {
            width: 50px;
            height: 50px;
            line-height: 50px;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -25px;
            background-color: #424242;
            color: #fff;
        }
        div:empty {
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <div><span>1</span></div>
    <div>2</div>
    <div><span></span></div>
</body>
</html>

【结果】

4.表单对象属性过滤选择器

E:checked

E:disabled

E:enabled

E:read-only

E:read-write

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .demo1 input:checked + span {
            background-color: #fcc;
            padding: 2px 5px;
        }
        .demo1 input:checked + span::after {
            content: '爱是热，被爱是光';
            color: #fff;
        }
        input[type='text'] {
            width: 250px;
            height: 30px;
            text-indent: 10px;
            border: none;
            display: block;
            margin-top: 3px;
            border-radius: 10px;
            outline: none;
        }
        .demo2 input:disabled {
            background-color: #fcc;
        }
        .demo2 input:enabled {
            background-color: thistle;
        }
        .demo3 input:read-only {
            background-color: #666;
            color: #fff;
        }
        .demo3 input:read-write {
            background-color: #cfc;
        }
    </style>
</head>
<body>
    <div class="demo1">
        <!-- checked -->
        <label for="demo">张爱玲语录</label>
        <input type="checkbox" id="demo">
        <span></span>
    </div>
    <div class="demo2">
        <!-- disabled, enabled -->
        <input type="text" disabled>
        <input type="text">
    </div>
    <div class="demo3">
        <!-- read-only, read-write -->
        <input type="text" readonly value="红玫瑰与白玫瑰">
        <input type="text">
    </div>

</body>
</html>

【结果】

 

桃花扇J
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
让IE可以变相支持CSS3选择器
09-25
此外，还提到了另一种替代方案——cssQuery，由Dean Edwards创建，它是一个JavaScript组件，全面支持包括CSS3在内的各种CSS选择器。开发者可以使用cssQuery为IE浏览器动态添加样式，而在其他支持CSS3选择器的浏览器...
CSS3 选择器 基本选择器介绍
12-13
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就...
CSS 选择器进阶
qq_41421033的博客
02-16 301
复合选择器 后代选择器: 空格 作用： 根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 选择器语法： 选择器1 选择器2 { css } 结果： 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式 注意点： 后代包括：儿子、孙子、重孙子…… 后代选择器中，选择器与选择器之前通过 空格 隔开 子代选择器：> 作用： 根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素 选择器语法： 选择器1 > 选择器2 {..
过滤性选择器
David's Notes
07-01 2704
过滤选择器，该类型的选择器是根据某过滤规则进行元素的匹配，书写时以“：”号开头,通常用于查找集合元素中的某一位置的单个元素。 1. :first过滤选择器 在jQuery中，如果想得到一组相同标签元素中的第1个元素该怎样做呢？ 在下面的示例代码中你可能注意到我们会使用 $(“li:first”) 注意：书写时以“：”号开头。<body> <div> 改变第一行的
笔记｜使用CSS选择器（基本选择器）
GUIDM的博客
04-14 1066
1、使用CSS基本选择器 基本选择器（basic selector）：使用起来非常简单。 1.1、选择所有元素 通用选择器：匹配文档中的所有元素，包括html和body元素。（使用很少） eg： <style type="text/css"> ​​* {​​ border: thin black solid;​​ padding: 4px;​​ } ​ </style> 定义的样式：将选中的样式以细黑框包起......
css3怎么排除第一个,css怎么排除第一个子元素
weixin_30764401的博客
08-04 5023
css排除第一个子元素的方法：1、通过使用伪类选择器“:not”实现排除；2、通过使用“nth-of-type”或者“nth-child”实现排除；3、通过使用“+”或者“~”兄弟选择符实现获取排除第一个之外的子元素。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。css获取除第一个之外的子元素在前端页面开发中，需要使用css来选择除了第一个之外的...
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
CSS3 选择器 属性选择器介绍
12-13
从上一节展示的CSS3选择器的图表中，我们可以知道，CSS3的属性选择器主要包括以下几种： E[attr]：只使用属性名，但没有确定任何属性值； E[attr="value"]：指定属性名，并指定了该属性的属性值； E[attr~="value"]...
CSS3 选择器 伪类选择器介绍
09-25
前面花了两节内容分别在《CSS3选择器——基本选择器》和《CSS3选择器——属性选择器》介绍了CSS3选择器中的基本选择器和属性选择器使用方法，今天要和大家一起学习CSS3选择器中的第三部分，也是最后一部分——伪类...
详解CSS3选择器的使用方法汇总
12-13
一 通用选择器1 *{}通配选择符(CSS2)：适合所有...CSS3新增的通用选择器：同级元素通用选择器：1 通用选择器E~F{}：匹配的是E元素之后的同级F元素匹配E后边所有的F，EF同级。只要F在E的后边，E只是作为一个参考。E~
CSS 选择器支持列表
09-25
* Firefox 3.5 和 Safari 3.1 及更高版本支持所有 CSS2.1 和 CSS3 选择器 * Opera 9.64 和更高版本支持所有 CSS2.1 和 CSS3 选择器 * Google Chrome 支持所有 CSS2.1 和 CSS3 选择器 * Internet Explorer 6-8 部分...
CSS3选择器总结CSS3选择器总结
11-05
CSS选择器可以分为多种类型，包括id选择器、类选择器、标签选择器、交叉选择器、群组选择器、后代选择器和通用选择器。 - id选择器：通过元素的id属性来选择特定元素，使用#符号加上id名作为选择器（如#idname）。 ...
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS3中的常用选择器使用示例整理
09-24
本文将详细介绍几个常用的选择器及其使用示例，帮助初学者更好地理解和掌握CSS3的选择器系统。 1. **根选择器**: `:root` 选择器 `:root` 选择器匹配文档的根元素，对于HTML文档来说，就是`<html>`元素。它通常...
CSS3 样式选择器
01-15
在定义CSS时，需要知道其书写语法和影响范围，此文档给你说明
jQuery过滤选择器详解
Ydoing的专栏
08-19 261
基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("background","#bfa"); }) 选取最后一个元素(:last) //选择最后一个div元素. $('#...
css过滤标签,CSS3 数据过滤（分类标签）选择器动效
weixin_30045751的博客
08-04 407
CSS语言：CSSSCSS确定body {background-color: #eee;margin: 0;padding: 0;font-family: Tahoma;}h2 {text-align: center;}#filter-bar {width: 100%;margin: 0;padding: 0;height: 36px;display: inline-flex;}#wrapper-...
jquery+css属性过滤选择
PinkCoder
04-09 2514
jquery+css属性过滤选择 当页面需要循环遍历出一个需求，假设是一个table的tr,由于是用循环遍历，我们不可能随意去给每个tr,td 的id,class或者其他属性取一个名字。这时可以利用实体类中的变化属性如id来给每个tr,td 的id,class或者其他属性取一个名字， 例如：div_实体类id, ‘div’仅仅是一个前缀名称，可任意取名； ‘_’用于分割，其他特殊字符也可以使用...
css去除选择器样式,CSS选择器样式排除一些选择
weixin_31295867的博客
08-04 1953
123...... etc和CSS样式#exclude1, #exclude2 {border:0; background:transparent; width:100%; height:100%; margin:auto; padding:0; float:none; position:relative;}* {border:1px solid red; background:red; widt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值