如何定位特定标签和文本，并将其变成链接到手机拨号屏幕的按钮

Question

所以我想定位一个特定的标签类，然后处理文本，把它变成一个按钮，让它链接到移动设备上的拨号屏幕。

目前我什至不知道如何定位标签。

尝试使用

 awpcp-subtitle:nth-child(2) {background-color: #d2e03a; 
color: white; text-align: center; border-radius: 2px} 

.awpcp-subtitle:nth-child(odd) {background-color: 
#d2e03a; color: white; text-align: center; border-radius: 
2px;} 

仅针对“更多信息”和“联系方式”。使用“标签”定位网站上的每个标签。

我有这个 html：

<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard- 
2/awpcp-reply-to-ad/13/madame-bovary/">Contact 
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK

标签是“电话”，后面的文字是电话号码，所以我想定位这个。把它变成链接到手机拨号屏幕的按钮是一个奖励，即使我可以只定位标签，那也很棒。

我正在尝试将“电话”标签连同文本一起变成一个按钮。我希望这个按钮链接到手机设备上的拨号盘。这是一个分类列表网站，所以我希望用户能够按下链接到拨号盘的按钮，这样他们就可以打电话和查询，而无需手动输入信息。目前我只有一个标签和号码，用户必须从网站复制并粘贴到拨号盘剪贴板。

我想要一些 css 来完成这一切，但没有一些 html 或如何使用 html 来完成。如果做不到这一点，只需将标签“电话”和它后面的数字作为目标，这样我就可以给它们一个背景色——一种背景色，所以它看起来像一个按钮。一旦我看到那个按钮，我就可以开始弄清楚如何把它变成一个链接，并让它链接到电话上的拨号盘。

即使是一些我可以插入到我的 header.php 中的 html 代码也可以完成所有工作。运行 WordPress。

更多html

div id="main" class="container" role="main">
<div class="row">
<div id="primary" class="col-md-8 mb-xs-24 sidebar- 
right">
<article id="post-1189" class="post-1189 page type-page 
status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"><span 
class="hpt_headertitle">Awpcp Show Ad</span></h1>    
</header><!-- .entry-header -->
<div class="entry-content">
<div id="classiwrapper"><ul class="awpcp-classifieds- 
menu awpcp-clearfix" data-breakpoints='{"tiny": [0,400], 
"small": [400,500]}' data-breakpoints-class-prefix="awpcp- 
classifieds-menu">
</ul>
<div id="showawpcpadpage">
<div class="awpcp-title"><a href="https://adsler.co.uk/wp- 
user-test-dashboard-2/awpcp-show-ad/13/madame- 
bovary/london/uk/books/">Madame Bovary</a></div>. 
<br/>
<div class="showawpcpadpage">
<div class="awpcp-ad-primary-image"><a class="awpcp- 
listing-primary-image-thickbox-link thickbox thumbnail" 
href="https://adsler.co.uk/wp- 
content/uploads/awpcp/images/61l8teochll-a0bee4d6-  
large.jpg" rel="awpcp-gallery-13"><img 
class="thumbshow" src="https://adsler.co.uk/wp- 
content/uploads/awpcp/thumbs/61l8teochll-a0bee4d6- 
primary.jpg" alt="Thumbnail for the listing's main image" 
width="200" height="200"/></a><a class="thickbox 
enlarge" href="https://adsler.co.uk/wp- 
content/uploads/awpcp/images/61l8teochll-a0bee4d6- 
large.jpg">Click to enlarge image.</a></div>
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard- 
2/awpcp-reply-to-ad/13/madame-bovary/">Contact 
Anonymous</a>
<br/><label>Phone:</label> 7576335122
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label> 
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
<div class="showawpcpadpage">
<div class="awpcp-subtitle">More Information</div>
This is Gustav Flaubert&#039;s most famous novel. 
Cheap price.
</div>
<div class="fixfloat"></div>
<div id="displayimagethumbswrapper">
<div id="displayimagethumbs">
<ul>
</ul>
</div>
</div>
<span class="fixfloat"><div class="tw_button 
awpcp_tweet_button_div"><a 
href="http://twitter.com/share? 
url=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test- 
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame-  






bovary%2Flondon%2Fuk%2Fbooks%2F&text=
Madame+Bov. 
ary" rel="nofollow" class="twitter-share-button" 
target="_blank">Tweet This</a></div> <div 
class="tw_button awpcp_tweet_button_div"><a 
href="http://www.facebook.com/sharer/sharer.php? 
u=https%3A%2F%2Fadsler.co.uk%2Fwp-user-test- 
dashboard-2%2Fawpcp-show-ad%2F13%2Fmadame- 
bovary%2Flondon%2Fuk%2Fbooks%2F" class="facebook- 
share-button" title="Share on Facebook" target="_blank">. 
</a></div> <a id="flag_ad_link" href="#" data- 
ad="13">Flag Ad</a></span>
<a href="https://adsler.co.uk/wp-admin/admin.php? 
page=awpcp-panel&#038;action=edit&#038;id=13" 
title="Edit Madame Bovary">Edit Ad</a>
</div></div><!--close classiwrapper-->
 </div><!-- .entry-content -->
 <footer class="entry-footer">
 <span class="edit-link"><a class="post-edit-link" 
 href="https://adsler.co.uk/wp-admin/post.php? 
post=1189&#038;action=edit">Edit <span class="screen- 
reader-text">"<span class="hpt_headertitle">Awpcp Show 
Ad</span>"</span></a></span>    </footer><!-- .entry- 
footer -->
</article><!-- #post-## -->
</div><!-- #primary -->


 <aside id="secondary" class="widget-area col-md-4" 
role="complementary">
 <div id="text-3" class="widget widget_text">            
<div class="textwidget"></div>
    </div></aside><!-- #secondary -->
</div>

Adsler.co.uk 是该网站。

https://adsler.co.uk/wp-user-test-dashboard-2/awpcp-show-ad/13/madame-bovary/london/uk/books/ 是该页面的示例。在这里，您可以看到“电子邮件”链接是可点击的，并且突出显示为按钮，但“电话和号码”不是。

有什么想法吗？

Answer 1

没有元素容器你不能定位纯文本。如果您可以修改 HTML，您至少应该将文本包装在一个跨度中。然而，更好的办法是将每个标签/内容块包装到一个带有类的 div 中。

由于您共享的只是一个小的 sn-p，我无法知道这是否可行，但在此示例中，您可以使用 nth-of-type 选择器获取“电话”。

<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard- 
2/awpcp-reply-to-ad/13/madame-bovary/">Contact 
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK

CSS

label:nth-of-type(1){
   your styles
}