CSS选择器（二）

最新推荐文章于 2022-07-10 16:12:15 发布

命中。

最新推荐文章于 2022-07-10 16:12:15 发布

阅读量161

点赞数

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

本文链接：https://blog.csdn.net/YANGMENGZHENG/article/details/120877163

版权

前言：

一、div标签

二、CSS的属性选择器

1、标签名[属性名]：选择含有给定属性的标签

2、标签名[属性名=值]：选择含有给定属性值的标签

3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的

4、标签名[属性名|=值]：选择给定属性值是以某个字符开头的

5、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的

6、标签名[属性名*=值]：选取属性值包含指定词的元素

7、应用

三、CSS的关系选择器（CSS组合器）

1、后代选择器:匹配属于指定元素后代的所有元素。（空格）

2、子选择器:匹配属于指定元素子元素的所有元素。（>）

3、相邻兄弟选择器:匹配所有作为指定元素的相邻同级的元素。(+)

4、通用兄弟选择器:匹配属于指定元素的同级元素的所有元素。

前言：

本篇文章介绍除基本选择器之外的其他选择器，基本选择器在CSS（层叠样式表）中有介绍。

首先我们先来认识一个标签，通常会和CSS结合进行页面的布局。

一、div标签

div 是 division 的简写。division 意为分割、区域、分组。

div是块级标签,是一个容器，可以嵌套其他的标签;若不与CSS结合使用，作用和<p>标签相似。

二、CSS的属性选择器

1、标签名[属性名]：选择含有给定属性的标签

eg:div[target]{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[target]{
            font-family: "隶书";
            font-size: larger;
            color: lawngreen;
        }

    </style>
</head>
<body>
    <h2>带有target属性的div</h2>
    <div target="text1">文本1</div>
    <div target="text2">文本2</div>
    <div target="text3">文本3</div>
    <div title="wb">文本4</div>
</body>
</html>

2、标签名[属性名=值]：选择含有给定属性值的标签

eg:div[target="text1"]{ }

div[target="text1"]{
            font-weight: bolder;
            color: lightcoral;
        }

3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的

eg：div[target^="bj"]{ }

div[title^="bj"]{
        color: cyan;
    }

注：不必是完整单词

4、标签名[属性名|=值]：选择给定属性值是以某个字符开头的

注：必须是完整单词

5、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的

eg:div[title$="city"] { }

div[title$="city"]{
        font-size:70px;
    }

6、标签名[属性名*=值]：选取属性值包含指定词的元素

 div[title*="z-"]{
        font-family: "黑体";
    }

最低0.47元/天解锁文章

命中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS选择器（二）

目录前言：一、div标签二、CSS的属性选择器1、标签名[属性名]：选择含有给定属性的标签2、标签名[属性名=值]：选择含有给定属性值的标签3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的4、标签名[属性名|=值]：选择给定属性值是以某个字符开头的5、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的6、标签名[属性名*=值]：选取属性值包含指定词的元素7、应用三、CSS的关系选择器（CSS组合器）1、后代选择器:匹配属于指定...
复制链接

扫一扫