在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>
。
我想使用在标签中包含所有类名的“副本选择器”。
我该怎么做?
答案 0 :(得分:0)
答案 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]