C# 如何将样式应用于剑道下拉列表中的一个元素？

我目前正在尝试剑道，我在网上找到了这个例子：

以下是ASP.NET MVC的代码：

<div class="demo-section">
<h2>View Order Details</h2>
<p>
    <label for="categories">Catergories:</label>
    @(Html.Kendo().DropDownList()
          .Name("categories")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select category...")
          .DataTextField("CategoryName")
          .DataValueField("CategoryId")
          .DataSource(source => {
               source.Read(read => {
                   read.Action("GetCascadeCategories", "ComboBox");
               });
          })
    )
   </p>
   <p>
    <label for="products">Products:</label>
    @(Html.Kendo().DropDownList()
          .Name("products")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select product...")
          .DataTextField("ProductName")
          .DataValueField("ProductID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeProducts", "ComboBox")
                      .Data("filterProducts");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("categories")
    )
        <script>
        function filterProducts() {
            return {
                categories: $("#categories").val()
            };
        }
    </script>
     </p>
     <p>
     <label for="orders">Orders:</label>
     @(Html.Kendo().DropDownList()
          .Name("orders")
          .HtmlAttributes(new { style = "width:300px" })
          .OptionLabel("Select order...")
          .DataTextField("ShipCity")
          .DataValueField("OrderID")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetCascadeOrders", "ComboBox")
                      .Data("filterOrders");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("products")
    )
    <script>
        function filterOrders() {
            return {
                products: $("#filterOrders").val()
            };
        }
     </script>
    </p>
   </div>
    <script>
    $(document).ready(function () {
    var categories = $("#categories").data("kendoDropDownList"),
        products = $("#products").data("kendoDropDownList"),
        orders = $("#orders").data("kendoDropDownList");

       $("#get").click(function () {
        var categoryInfo = "\nCategory: { id: " + categories.value() + ", name: " + categories.text() + " }",
            productInfo = "\nProduct: { id: " + products.value() + ", name: " + products.text() + " }",
            orderInfo = "\nOrder: { id: " + orders.value() + ", name: " + orders.text() + " }";

        alert("Order details:\n" + categoryInfo + productInfo + orderInfo);
    });
});
</script>
<style scoped>
.demo-section {
    width: 460px;
    padding: 30px;
}
.demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.demo-section label {
    display: inline-block;
    width: 120px;
    padding-right: 5px;
    text-align: right;
}
.demo-section .k-button {
    margin: 20px 0 0 125px;
}
.k-readonly
{
    color: gray;
}

查看订单详细信息

分类：
@（Html.Kendo（）.DropDownList（））
.名称（“类别”）
.HtmlAttributes（新的{style=“width:300px”}）
.OptionLabel（“选择类别…”）
.DataTextField（“CategoryName”）
.DataValueField（“类别ID”）
.DataSource（source=>{
source.Read（Read=>{
read.Action（“getCategories”、“ComboBox”）；
});
})
)


产品：
@（Html.Kendo（）.DropDownList（））
.名称（“产品”）
.HtmlAttributes（新的{style=“width:300px”}）
.OptionLabel（“选择产品…”）
.DataTextField（“产品名称”）
.DataValueField（“产品ID”）
.DataSource（source=>{
source.Read（Read=>
{
read.Action（“GetCascadeProducts”、“ComboBox”）
.数据（“过滤产品”）；
})
.ServerFiltering（true）；
})
.Enable（false）
.AutoBind（假）
.CascadeFrom（“类别”）
)
函数filterProducts（）{
返回{
类别：$（“#类别”）.val（）
};
}


订单：
@（Html.Kendo（）.DropDownList（））
.名称（“订单”）
.HtmlAttributes（新的{style=“width:300px”}）
.OptionLabel（“选择订单…”）
.DataTextField（“ShipCity”）
.DataValueField（“订单ID”）
.DataSource（source=>{
source.Read（Read=>
{
read.Action（“GetCascadeOrders”、“ComboBox”）
.数据（“过滤器订单”）；
})
.ServerFiltering（true）；
})
.Enable（false）
.AutoBind（假）
.来自（“产品”）
)
函数filterOrders（）{
返回{
产品：$（“#过滤器订单”）.val（）
};
}

$（文档）.ready（函数（）{
var类别=$（“#类别”）.数据（“kendoDropDownList”），
产品=$（“#产品”）.data（“kendoDropDownList”），
订单=$（“#订单”）.data（“kendoDropDownList”）；
$（“#获取”）。单击（函数（）{
var categoryInfo=“\n类别：{id:“+categories.value（）+”，名称：“+categories.text（）+”}”，
productInfo=“\n产品：{id:+products.value（）+”，名称：“+products.text（）+”}”，
orderInfo=“\nOrder:{id:“+orders.value（）+”，name:“+orders.text（）+”}”；
警报（“订单详细信息：\n”+类别信息+产品信息+订单信息）；
});
});
.演示部分{
宽度：460px；
填充：30px；
}
.演示部分h2{
文本转换：大写；
字体大小：1.2米；
边缘底部：30px；
}
.演示部分标签{
显示：内联块；
宽度：120px；
右侧填充：5px；
文本对齐：右对齐；
}
.演示部分.k按钮{
利润率：20像素0.125像素；
}
.k-只读
{
颜色：灰色；
}

以下是带有交互式演示和源代码的网站：

我想知道我是否希望dropdownlist中的单词“Select Category…”或“Select Product…”变成斜体字体，并且只有该元素（dropdownlist的第一个元素），我如何才能做到这一点

---

当前

.HtmlAttributes（新的{style=“width:300px”}）

（例如）将把样式应用于列表中的所有元素。如何使其仅应用于列表中的一个元素

您必须使用类似以下内容手动将样式应用于指定为占位符的项目

$("#myDropDownList").find(".k-select").css("background-color", "yellow" );

---

我的意思是如何将其应用于dropdownlist的第一个元素？也就是说，例如，下列表[0]应该返回Select Product。在您的示例中，您使用的是myDropDownList，但这将样式应用于dropdownlist中的所有元素，对吗？当我在dom中查看带有占位符的下拉列表时，占位符或带有下拉箭头的元素似乎被标记为“k-select”类，这就是我建议查找（.k-select）的原因。要将样式应用于您指定的项目的“占位符”。OptionLabel（“选择订单…”），我仍然感到困惑。你能详细说明一下吗？