【CSS】CSS常用选择器

最新推荐文章于 2021-12-06 13:50:58 发布

Musecho

最新推荐文章于 2021-12-06 13:50:58 发布

阅读量140

点赞数

本文链接：https://blog.csdn.net/u012161251/article/details/106010889

版权

DIV

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个块级元素，单独占一行；

它主要用于页面的布局；

Span

Div是一个html的标签，单独使用没有意义，必须结合CSS使用；

是一个内联元素，显示一行；

它主要用于对括起来的内容进行样式的修饰；

CSS

层叠样式表：同一元素，同一属性，设置不同值；

解决内容与表现分离的问题（html只能将元素展现出来，内容样式无法展示出来），对内容进行修饰；

语法和规范

1. 设置样式

<style></style>

*第一种写法：写在<head></head>内部

*第二种写法：外部引入

<style></style> 内部：

（选择器：用于快速查找需要设置样式的元素）

选择器{

 属性名1:属性值1;

 属性名2:属性值2(;)

 }

*最后一个分号可省略

2. 基本选择器

A. 元素选择器：对整体设置样式（div）

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <!--对整体设置样式-->
        <style  type="text/css">
            div{
                font-size:50px;
                color:pink;
            }
        </style>
    </head>
    <body>
        <div>
            哈哈哈哈哈11
        </div>
        <div>
            哈哈哈哈哈22
        </div>
        <div>
            哈哈哈哈哈33
        </div>
        <div>
            哈哈哈哈哈44
        </div>
        <div>
            哈哈哈哈哈55
        </div>
    </body>

</html>

结果：

B. 类选择器：部分设置样式（. class名字）

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <!--部分设置样式-->
        <style>
            .div2{
                font-size: 30px;
                color:gold
            }
        </style>
    </head>
    <body>
        <div>
            哈哈哈哈哈11
        </div>
        <div class="div2">
            哈哈哈哈哈22
        </div>
        <div>
            哈哈哈哈哈33
        </div>
        <div class="div2">
            哈哈哈哈哈44
        </div>
        <div>
            哈哈哈哈哈55
        </div>
    </body>
</html>

结果：

C. id选择器：单个设置样式（# id名）

*注意：虽然44可以实现样式，但不是id选择器的目的，此处是有问题的。使用时只设置一个。

例子：

<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <!--单个设置样式-->
    <style>
        #div5 {
            font-size: : 30px;
            color: yellow;
        }
    </style>
</head>

<body>
    <div>
        哈哈哈哈哈11
    </div>
    <div class="div2">
        哈哈哈哈哈22
    </div>
    <div>
        哈哈哈哈哈33
    </div>
    <div class="div2" id="div5">
        哈哈哈哈哈44
    </div>
    <div id="div5">
        哈哈哈哈哈55
    </div>
</body>

结果：

3.其他选择器

D. 通配选择器：选择页面中所有元素

*{
    background-color:yellow;
}

E. 后代元素选择器：(祖先元素后代元素)

例子：选择在<div>中的<p>

<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style>
        div p{
            font-size:30px;;
            color:green;
        }
    </style>
</head>
<body>
    <div>
        哈哈哈哈哈11
    </div>
    <div>
        哈哈哈哈哈22
    </div>
    <div>
        哈哈哈哈哈33
    </div>
    <div>
        <p>
            哈哈哈哈哈55
        </p>
    </div>
    <div>
        哈哈哈哈哈55
    </div>
</body>

结果：

.属性选择器：属性选择样式( input[type='..' ] )

例子：

<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        input[type='text']{
            background-color: red;
        }

        input[type='password']{
            background-color: blue;
        }
    </style>
</head>
<body>
    用户名：<Input type="text" name="username"/><br />
    密码：<input type="password" name="password" />
</body>

结果：

Musecho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】CSS常用选择器

DIVDiv是一个html的标签，单独使用没有意义，必须结合CSS使用；是一个块级元素，单独占一行；它主要用于页面的布局； SpanDiv是一个html的标签，单独使用没有意义，必须结合CSS使用；是一个内联元素，显示一行；它主要用于对括起来的内容进行样式的修饰； CSS层叠样式表：同一元素，同一属性，设置不同值；解决内容与表现分离的问题（html只能将元素展现...
复制链接

扫一扫