我如何获得包括类名的选择器

时间:2019-10-29 22:04:48

标签: css selector

enter image description here

在html检查窗口中,我通常使用“复制选择器” 但这只会带来<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script> <div class="container-fluid"> <div class="card"> <div class="card-header"> <h4>Main Menu</h4> <ul class="nav nav-tabs card-header-tabs" id="agency_tabs" role="tablist"> <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#tab_1" data-group="section-1">Section 1</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_2" data-group="section-2">Section 2</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_3">Section 3</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_4">Section 4</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_5">Section 5</a></li> <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab_6">Section 6</a></li> </ul> </div> <div class="card-body"> <form action="#" method="post" novalidate> <div class="tab-content"> <div id="tab_1" class="tab-pane active"> <div class="form-row"> <div class="form-group col-6"> <label class="font-weight-bold" for="fname">First Name:</label> <input class="form-control" type="text" name="fname" id="fname" value="" maxlength="30" placeholder="Please enter first name." data-group="section-1" required> </div> <div class="form-group col-6"> <label class="font-weight-bold" for="lname">Last Name:</label> <input class="form-control" type="text" name="lname" id="lname" value="" maxlength="30" placeholder="Please enter last name." data-group="section-1" required> </div> </div> <div class="row"> <div class="col-12 text-center m-3"> <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-1">Save</button> <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button> </div> </div> </div> <div id="tab_2" class="container tab-pane fade"> <div class="form-group"> <label class="font-weight-bold" for="phone">Phone Number:</label> <input class="form-control" type="text" name="phone" id="phone" value="" pattern="\d{3}-\d{3}-\d{4}" data-dispfld="The required format is: 000-000-0000" maxlength="12" data-group="section-2" required> </div> <div class="row"> <div class="col-12 text-center m-3"> <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-2">Save</button> <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button> </div> </div> </div> <div id="tab_3" class="container tab-pane fade"> <div class="form-group"> <label class="font-weight-bold" for="email">Email:</label> <input class="form-control" type="email" name="email" id="email" value="" maxlength="40" data-group="section-3" required> <small class="form-text text-muted">This Email Address is used for login to your account.</small> </div> <div class="row"> <div class="col-12 text-center m-3"> <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-3">Save</button> <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button> </div> </div> </div> <div id="tab_4" class="container tab-pane fade"> <div class="form-group"> <label class="font-weight-bold" for="title">Business Title:</label> <select class="custom-select browser-default" name="title" id="title" data-group="section-4"> <option value="">--Select Title--</option> <option value="1">Manager</option> <option value="2">Secretary</option> <option value="3">Tester</option> </select> </div> <div class="row"> <div class="col-12 text-center m-3"> <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-4">Save</button> <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button> </div> </div> </div> <div id="tab_5" class="container tab-pane fade"> <div class="form-group"> <label class="font-weight-bold" for="cname">Company Name:</label> <input class="form-control" type="text" name="cname" id="cname" value="" maxlength="120" placeholder="Please enter Company." data-group="section-5" required> </div> <div class="row"> <div class="col-12 text-center m-3"> <button type="button" name="save" class="btn btn-secondary save-data" data-group="section-5">Save</button> <button type="button" name="cancel" class="btn btn-secondary cancel">Cancel</button> </div> </div> </div> <div id="tab_6" class="container tab-pane fade"> This tab will display some general information. No input fields. </div> </div> </form> </div> </div> </div> s,有时包括<tag>

我想使用在标签中包含所有类名的“副本选择器”。

我该怎么做?

2 个答案:

答案 0 :(得分:0)

只需在检查器中单击“ 新样式规则”按钮(“元素”选项卡右上角加号),在某些情况下,它将生成一个包含类或ID和标记的样式规则。然后,您可以复制其生成的值。

enter image description here

答案 1 :(得分:0)

您可以使用Firefox开发者工具
选择您的元素->右键单击选择复制-> CSS路径

复制后的结果:html body#gsr.hp.vasq.big div#viewport.ctr-p div#main.content span#body.ctr-p center div#lga img#hplogo


[CSS Path]