css的选择器

最新推荐文章于 2022-09-26 19:29:14 发布

best-toby

最新推荐文章于 2022-09-26 19:29:14 发布

阅读量429

点赞数

分类专栏：新手笔记文章标签：菜鸟 css

本文链接：https://blog.csdn.net/besttoby01/article/details/75095250

版权

新手笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

2.选择器

所谓选择器，指的就是施加样式目标的方式

2.1元素选择器

用标签名作为选择器，选中所有的相应的元素

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        div{
            font-size: 50px;
            color: green;
        }
        p{
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
<div>元素选择器的使用</div>
<p>元素选择器的使用1</p>
<p>元素选择器的使用2</p>
</body>

2.2 Id选择器

是根据id来选择元素，其样式定义形式为

#idname{
........
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #dv0{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #dv1{
            width: 200px;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body>
<div id="dv0">id选择器的使用</div>
<div id="dv1">id选择器的使用</div>
</body>

2.3类选择器

根据class属性来选择元素，其样式定义形式为：

className{
.........
}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        .old{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .even{
            width: 200px;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body>
<div class="old">id选择器的使用</div>
<div class="even">id选择器的使用</div>
<div class="old">id选择器的使用</div>
</body>

从结果上看，.old{。。。}会施加到所有的class=”old”的元素上，可以使用在p上

2.4属性选择器

1.根据属性名来选择

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        [title]{
            width: 100px;
            height: 100px;
            background-color: blue;
            border:2px solid red;
        }
    </style>
</head>
<body>
<div title="div1"></div>
<div title="div2"></div>
<div>3</div>
<div title="div a"></div>
<div title="a div"></div>
</body>

结果看出，所有具有title属性的div元素都可以适用，别的还不知道

2.根据属性值来选择

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        [title="div2"]{
            width: 100px;
            height: 100px;
            background-color: blue;
            border:2px solid red;
        }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="div a">4</div>
<div title="a div">5</div>
</body>

结果看出，只有div2应用了格式，因为是title=div2

Title~=”div”：选中属性值包含指定完整单词的元素

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        [title~="div"]{
            width: 100px;
            height: 100px;
            background-color: blue;
            border:2px solid red;
        }
    </style>
</head>
<body>
<div title="div1">1</div>
<div title="div2">2</div>
<div>3</div>
<div title="div a">4</div>
<div title="a div">5</div>
</body>

Title^=””div：选中以div开头的title

Title$=”div”:选中以div元素结尾的title

Title*=”div”:选中属性值包含“div”的元素

总结

有多种选择器，使用的方法都不相同，像id选择器，就比较容易，以前都学过一点；类选择器，与id选择器的使用方法差不多，只不过class可以重复，而id只有一个，唯一一个。元素选择器的使用比较简单，与一般的p啊，div之类的，使用方法一样。title使用有多种，Title^=””div、Title$=”div”、Title*=”div”，分别是选中以div开头的title、选中以div元素结尾的title、选中属性值包含“div”的元素。

best-toby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css的选择器

2.选择器所谓选择器，指的就是施加样式目标的方式2.1元素选择器用标签名作为选择器，选中所有的相应的元素 div{ font-size: 50px; color: green; } p{ font-size: 50px;
复制链接

扫一扫