一：背景1. 讲故事
前段时间搞了一个地方性民生资讯号，资讯嘛，都是我抄你的，你抄官媒的，小市民都喜欢奇闻异事，所以就存在一个需求，如何去定向抓取奇闻异事的地方号上的新闻，其实做起来很简单，用逻辑回归即可，这篇主要讨论如何去抓取，在 C# 中大家都知道抓取通用的库是 HtmlAgilityPack，但是这个库主流的做法是采用 xpath 提取网页内容，这就让我很不爽了，毕竟不熟悉莫名的抵抗哈，像我这个年纪的码农，被 Jquery 教育了至少 5-6 年，所以必须用 类Jquery 的方式，在 python 中有 pyquery 做这件事情，那在C# 中有没有类似的方式呢？嘿嘿，万能的 github 上还真有。。。就是本篇介绍的 CSQuery。
二：CSQuery1. 安装
github的地址： 然后在vs中 nuget 一下即可：
2. 举几个例子
一切都准备就绪了，那怎么用呢？不着急，我以博客园举两个例子。
1) 将首页中的 友情连接 提取到
如上图，要想获取这里的 友情链接几个大字，直接用 text() 肯定是不行的，默认情况它会将所有的子节点的文本也会抓到，如下图：
那怎么处理呢？可以用 jquery 提供的 contents 方法，然后在获取的所有子节点中判断是否有 文本节点，最后获取文本节点的内容即可，如下代码：
用js是搞定了，那用 CSQuery 代码怎么搞定呢？模仿呗，如下代码：
static void Main(string[] args)
{
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var content = jquery["#friend_link"].Contents().Filter((dom) =>
{
return dom.NodeType == NodeType.TEXT_NODE;
}).Text();
Console.WriteLine(content);
}
我不知道用 xpath 提取这样的内容麻不麻烦，不过用 jquery 方式不简单，但轻车熟路。
2) 如何将 html 中的某些元素标颜色
有时候为了业务需要将某些 html 标签改一下颜色，比如说将首页的 tabmenu 中 博问 和 专区 改成红色，如下图：
那用 CSQuery 怎么处理呢？如果玩过 jquery，一般来说步骤如下：
有了步骤，C#代码如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var jquery = CQ.CreateDocument(new WebClient().DownloadString("http://cnblogs.com"));
var html = jquery["#nav_left li"].Each(dom =>
{
var self = jquery[dom];
var text = self.Text();
if (text == "博问" || text == "专区")
{
self.Find("a").CssSet(new { color = "red" });
}
}).Render();
}
3) 其他的操作方法
除了上面两个操作方法外，你还可以使用 after，before，replaceAll,IS 等等一百来个实用的方法，这篇肯定也无法一一介绍了，大家有兴趣可以下载下来看一看，捣鼓捣鼓。
三：其他用途
除了抓取html中的元素，我觉得这玩意还可以用在发送邮件时操控邮件模板，毕竟在很久以前大家都是用jquery来绘制 html，所以用 CSQuery 也是可以的，相对使用 xslt 有利有弊吧，接下来做一个例子：
1. 生成一个html模板
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>title>
head>
<body>
<ul id="main">ul>
body>
html>
2. 使用 CSQuery 给 ul 追加 li
可以用 Append 将内容追加到 节点内。
class Program
{
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
foreach (var str in strlist)
{
jquery.Find("#main").Append($"{str} ");
}
var html = jquery.Render();
}
}
3. 部分渲染 RenderSelection
Render方法是将整个Dom渲染成html，但有时候你只需要得到你修改的那部分内容，而不是整个html，这就涉及到了部分渲染，可以用 RenderSelection 方法即可，代码如下：
static void Main(string[] args)
{
Config.HtmlEncoder = HtmlEncoders.None;
var strlist = new string[2] { "1", "2" };
var path = Environment.CurrentDirectory + "\\2.html";
var jquery = CQ.CreateFromFile(path);
var current = jquery.Find("#main");
foreach (var str in strlist)
{
current.Append($"{str} ");
}
var html = current.RenderSelection();
Console.WriteLine(html);
}
------------- output ----------------
"main">1 2
四：总结
Jquery 这种操作模式对我个人来说还是比较舒服的，毕竟熟！不过在 html5 中也新增了 querySelector 和 querySelectorAll 支持 css3 选择器，非常强大，可 jquery 不光在选择器的灵活上，还在于对节点的灵活操作上，总的来说不是特别富交互的情况下可以怀旧一把。
【开发小技巧】10—如何使用HTML和CSS创建导航菜单？
来源 | web前端开发(ID：web_qdkf)
对于不擅长写CSS的程序员来说，通过CSS来创建一个有吸引力的导航是件非常困难的事情。
在本文中，我们主要是将通过HTML与CSS来创建一个导航。
首先，我们将为导航创建HTML的结构，然后根据需要设计结构。
创建结构：在这里，我们将使用标签创建一个普通的结构。这将创建一个简单的界面，你可以通过运行以下代码进行检查：
HTML代码如下：
<html> <head><title>如何使用HTML和CSS创建面导航title>head><body><h1>web前端开发公众号h1><b>网址：www.webqdkf.comb><ul class="addressLink"><li><a href="#">HOMEa>li><li><a href="#">WEBa>li><li><a href="#">CSSa>li><li><a href="#">HTMLa>li><li><a href="#">JSa>li><li><a href="#">VUEa>li>ul>body>html>
设计结构：这是最困难的任务，是在导航的右侧创建箭头形状。为了创建箭头形状，我们将使用:: after选择器。使用z-index属性将一个列表放置在另一列表上。对于CSS开发人员而言，这些事情都是非常容易的。
CSS代码：
<style>body {text-align: center;}h1{color: #;}/* Styling addressLink class */.addressLink {list-style: none;overflow: hidden;font: 16px;margin: 30px;padding: 0px;border: 2px solid black;font-style: italic;}/* Floating addressLink list */.addressLink li {float: left;}/* Styling addressLink list's anchor element*/.addressLink li a {background: #19b0cb;color: white;text-decoration: none;padding: 5px 0px 5px 65px;position: relative;float: left;}.addressLink li a:after {content: " ";border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 30px solid #19b0cb;margin-top: -50px;position: absolute;top: 50%;left: 100%;z-index: 2;}.addressLink li a:before {content: " ";border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 30px solid white;position: absolute;top: 50%;left: 100%;z-index: 1;}/* First child padding */.addressLink li:first-child a {padding-left: 10px;}/* Second child bg-color */.addressLink li:nth-child(2) a {background: #7c7f7f;}/* Second child Second half bg-color */.addressLink li:nth-child(2) a:after {border-left-color: #7c7f7f;}/* Third child bg-color */.addressLink li:nth-child(3) a {background: #b4b4b4;}/* Third child Second half bg-color */.addressLink li:nth-child(3) a:after {border-left-color: #b4b4b4;}/* Last child bg-color and text-color */.addressLink li:last-child a {background: transparent ;color: #000;}.addressLink li:last-child a:after {border: 0px;}/* Hover on list's anchor element */.addressLink li a:hover {background: #7c7f7f;}.addressLink li a:hover:after {border-left-color: #7c7f7f ;}style>
最后，在本文中，我们将结合HTML和CSS代码来完成，全部代码如下：
<html><head><title>如何使用HTML和CSS创建导航title><style>body {text-align: center;}h1{color: #;}/* Styling addressLink class */.addressLink {list-style: none;overflow: hidden;font: 16px;margin: 30px;padding: 0px;border: 2px solid black;font-style: italic;}/* Floating addressLink list */.addressLink li {float: left;}/* Styling addressLink list's anchor element*/.addressLink li a {background: #19b0cb;color: white;text-decoration: none;padding: 5px 0px 5px 65px;position: relative;float: left;}.addressLink li a:after {content: " ";border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 30px solid #19b0cb;margin-top: -50px;position: absolute;top: 50%;left: 100%;z-index: 2;}.addressLink li a:before {content: " ";border-top: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 30px solid white;position: absolute;top: 50%;left: 100%;z-index: 1;}/* First child padding */.addressLink li:first-child a {padding-left: 10px;}/* Second child bg-color */.addressLink li:nth-child(2) a {background: #7c7f7f;}/* Second child Second half bg-color */.addressLink li:nth-child(2) a:after {border-left-color: #7c7f7f;}/* Third child bg-color */.addressLink li:nth-child(3) a {background: #b4b4b4;}/* Third child Second half bg-color */.addressLink li:nth-child(3) a:after {border-left-color: #b4b4b4;}/* Last child bg-color and text-color */.addressLink li:last-child a {background: transparent ;color: #000;}.addressLink li:last-child a:after {border: 0px;}/* Hover on list's anchor element */.addressLink li a:hover {background: #7c7f7f;}.addressLink li a:hover:after {border-left-color: #7c7f7f ;}style>head><body><h1>web前端开发公众号h1><b>网址：www.webqdkf.comb><ul class="addressLink"><li><a href="#">HOMEa>li><li><a href="#">WEBa>li><li><a href="#">CSSa>li><li><a href="#">HTMLa>li><li><a href="#">JSa>li><li><a href="#">VUEa>li>ul>body>html>
输出：
