如何定位一个特定的标签和文本，并将其转换为一个链接到手机拨号屏幕的按钮

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;} 

它只针对“更多信息”和“联系方式”。使用' label‘定位网站上的每一个标签。

我有这个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

标签是' phone‘，前置文本是电话号码，所以我想把这个作为目标。把它变成一个按钮，它链接到移动拨号屏幕是一个额外的奖励，即使我可以只针对标签，这将是超级。

我想要做的是把“电话”标签和文本一起变成一个按钮。我希望这个按钮链接到移动电话设备上的拨号盘。这是一个分类广告列表网站，所以我希望用户能够按下连接到拨号盘的按钮，这样他们就可以打电话查询，而不必手动输入信息。目前，我只有一个标签和数字，用户必须从网站复制并粘贴到拨号盘剪贴板。

我希望一些css来做这一切，没有一些html或如何做它与html。如果做不到这一点，只需将标签“phone”和后面的数字作为目标，这样我就可以给它们一个背景色--一个背景色，这样它看起来就像一个按钮。一旦我有了那个按钮外观，我就可以开始想办法把它变成一个链接，让它链接到电话上的拨号盘上。

甚至一些html代码，我可以直接插入到我的header.php中，这样就可以完成所有的工作。运行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/就是该页面的一个例子。在这里你可以看到'email‘链接是可以点击的，并且突出显示为按钮，但是'phone and number’不是。

有什么想法吗？

Answer 1

如果没有元素容器，就不能以纯文本为目标。如果您可以修改HTML，那么您至少应该将文本包含在span中。但是，更好的做法是将每个标签/内容块包装到一个带有类的div中。

由于您所分享的只是一个小片段，我无法知道这是否可以工作，但在本例中，您可以使用第n个类型的选择器来获取"phone“。

<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
}