CSS常用样式（id/class/元素选择器用法）

五彩大铁猿

已于 2022-08-05 22:40:54 修改

阅读量1.9k

点赞数 1

分类专栏： web 文章标签： css 前端 html

于 2022-08-05 22:37:13 首次发布

本文链接：https://blog.csdn.net/weixin_47314602/article/details/126186628

版权

web 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

在本篇文章之前，我有写过CSS样式表中的内联式与外链式的样式设置，需要了解的可以点进专栏里面学习。本篇文章主要是写id选择器、class类选择器以及元素选择器的用法介绍。

id选择器

首先我们在input这边设置一个id（id="ww"）。

<input id="ww" type="text" name="username" ><br>

其次在<head>里面将格式写出来，这边id引用的话需要在前面加上#字符。

#ww{

background-color: aqua;

}

class选择器

首先也是选着想要调整的文本框，定义class（我这边是随意定义了一下class="class_w"）

<input class="class_w" type="number" name="age"><br>

其次在<head>里面将格式写出来，这边claa引用的话需要在前面加上英文格式的点(.)。

.class_w{

background-color: bisque;

}

元素选择器

元素选择器不用再做设定，直接引用文章中的元素做设置。在这边我们以input为例做个简单文本框背景颜色设定，代码如下。

input{

background-color: blueviolet;

}

完整代码

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>表单</title>
<head>
    <style  type="text/css">
       
       label{
        cursor: pointer;
        display: inline-block;
        padding: 3px 6px;
        text-align: right;
        width: 150px;
        vertical-align: top;
            }
        #ww{
            background-color: aqua;
        }
        .class_w{
            background-color: bisque;
        }
        input{
            background-color: blueviolet;
        }
    </style>

</head>
<body>
    <div>
        <h1>Zoo Keeper Application Form</h1>
        <h4>Please complete the form Mandatory fields are marked with a</h4>
        <form  action="/test/url/">

        <fieldset >
            <legend>CONTACT DETAILS</legend>
            <label for="username">Name*</label>
            <input id="ww" type="text" name="username" ><br>

            <label >Telephone* </label>
            <input type="number" name="number" ><br>

            <label>  Email*</label>
             <input type="text" name="Email" ><br>
        </fieldset>

        <fieldset >
            <legend>PERSONAL INFORMATION</legend>
            <label> age</label>
            <input class="class_w" type="number" name="age"><br>

            <label>  Gender </label>
            <select >
                <option>one</option>
                <option>two</option>
                <option>three</option>
                <option>four</option>
            </select><br>  

            <label>When did you fist know you wanted to be a zoo_keeper</label>  
            <textarea cols="60" rows="6"></textarea>
        </fieldset><br>


        <fieldset >
            <legend>PICK YOUR FAVORITE ANIMALS</legend>
            <input type="checkbox" name="ANIMAL" value="Zebra">Zebra
            <input type="checkbox"name="ANIMAL" value="Cat">Cat
            <input type="checkbox"name="ANIMAL" value="Anaconda">Anaconda
            <input type="checkbox"name="ANIMAL" value="Human">Human<br>
            <input type="checkbox"name="ANIMAL" value="Elephant">Elephant
            <input type="checkbox"name="ANIMAL" value="Wildebeest">Wildebeest
            <input type="checkbox"name="ANIMAL" value="Pigeon">Pigeon
            <input type="checkbox"name="ANIMAL" value="Crab" >Crab<br>
        </fieldset>

            <input type="submit" value="注册">
        </form>

        </div>

</body>



</html>

运行结果如下：

看到这里啦，如过觉得有用，点赞收藏再走，不然下回找不到啦。比心

五彩大铁猿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS常用样式（id/class/元素选择器用法）

元素选择器不用再做设定，直接引用文章中的元素做设置。在这边我们以input为例做个简单文本框背景颜色设定，代码如下。首先也是选着想要调整的文本框，定义class（我这边是随意定义了一下class="class_w"）其次在里面将格式写出来，这边claa引用的话需要在前面加上英文格式的点(.)。其次在里面将格式写出来，这边id引用的话需要在前面加上#字符。首先我们在input这边设置一个id（id="ww"）。......
复制链接

扫一扫