选择器

OfType

XAML

<Style Selector="Button">
<Style Selector="local|Button">

C#

new Style(x => x.OfType<Button>());
new Style(x => x.OfType(typeof(Button)));

按类型选择控件。上面的第一个示例选择Avalonia.Controls.Button类。若要在类型中引用XAML命名空间，请使用|字符分隔命名空间和类型。

此选择器不会匹配派生类。想要实现派生类匹配请使用Is选择器。

注意：对象的类型实际上是通过查看其IStyleable.StyleKey属性来确定的。默认情况下，这只是返回当前实例的类型，但如果例如您确实希望从Button继承的控件样式为Button，则可以在类上实现IStyleable.StyleKey属性以返回typeof(Button)。

Name

XAML

<Style Selector="#myButton">
<Style Selector="Button#myButton">

C#

new Style(x => x.Name("myButton"));
new Style(x => x.OfType<Button>().Name("myButton"));

使用#字符按控件的Name属性选择一个控件。

Class

XAML

<Style Selector="Button.large">
<Style Selector="Button.large:focus">

C#

new Style(x => x.OfType<Button>().Class("large"));
new Style(x => x.OfType<Button>().Class("large").Class(":focus"));

选择一个具有指定样式类的控件。多个类用.字符分开，如果是伪类则用:字符。如果指定了多个样式类，那么控件必须有所有必要的样式类才能够匹配。

Is

XAML

<Style Selector=":is(Button)">
<Style Selector=":is(local|Button)">

C#

new Style(x => x.Is<Button>());
new Style(x => x.Is(typeof(Button)));

这与OfType选择器非常相似，只是它也匹配派生类型。

同样，对象的类型实际上是通过查看其IStyleable.StyleKey属性来确定的。

Child

XAML

<Style Selector="StackPanel > Button">

C#

new Style(x => x.OfType<StackPanel>().Child().OfType<Button>());

Child选择器是通过用>字符分隔两个选择器来定义的。此选择器匹配逻辑树中的直接子元素，因此在上面的例子中，选择器将匹配作为StackPanel的直接逻辑子元素的任何Button。

Descendant

XAML

<Style Selector="StackPanel Button">

C#

new Style(x => x.OfType<StackPanel>().Descendant().OfType<Button>());

当两个选择器用空格分隔时，选择器将匹配逻辑树中的后代(Descendant)，因此在这种情况下，选择器将与作为StackPanel逻辑后代的任何Button匹配。

PropertyEquals

XAML

<Style Selector="Button[IsDefault=true]">

C#

new Style(x => x.OfType<Button>().PropertyEquals(Button.IsDefaultProperty, true));

匹配将某个具体属性设置为某个具体值的所有控件。

注意： 在XAML内部的选择器中使用AttachedProperty时，必须用小括号包装。

<Style Selector="TextBlock[(Grid.Row)=0]">

注意： 在XAML中使用选择器时，属性必须支持TypeConverter

Template

XAML

<Style Selector="Button /template/ ContentPresenter">

C#

new Style(x => x.OfType<Button>().Template().OfType<ContentPresenter>());

匹配控件模板中的控件。这里列出的所有其他选择器都作用在逻辑树上。如果要在控件模板中选择控件，则必须使用此选择器。该示例选择Button模板中的ContentPresenter控件。

Not

XAML

<Style Selector="TextBlock:not(.h1)">

C#

new Style(x => x.OfType<TextBlock>().Not(y => y.Class("h1")));

取反内部选择器。

Or

XAML

<Style Selector="TextBlock, Button">

C#

new Style(x => Selectors.Or(x.OfType<TextBlock>(), x.OfType<Button>()))

查找任意一个与这些选择器中匹配的元素。每个选择器用,分开。

Nth Child

XAML

<Style Selector="TextBlock:nth-child(2n+3)">

C#

new Style(x => x.OfType<TextBlock>().NthChild(2, 3));

根据元素在一组邻近元素中的位置来匹配。

Nth Last Child

XAML

<Style Selector="TextBlock:nth-last-child(2n+3)">

C#

new Style(x => x.OfType<TextBlock>().NthLastChild(2, 3));

根据元素在一组邻近元素中的位置来匹配，从末端开始计算。

Nth Child and Nth Last Child Syntax

:nth-child()和:nth-last-child()需要一个参数用以描述一个模式，这个模式用于匹配邻近列表中的元素索引。元素索引数是从1开始的。下面的例子使用:nth-child()，但这条规则也适用于:nth-last-child()。

关键字符号

odd代表在一系列邻近元素中索引为奇数的元素：1、3、5...。

even代表在一系列邻近元素中索引为偶数的元素：2、4、6...。

功能符号

An+B代表一个列表中的元素，其索引数与An+B定义的自定义数字模式中找到的索引一致，其中：

• A是整数，代表步长(step size)。

• B是整数，代表偏移量(offset)。

• n是所有从0开始的非负整数。

这可以这样理解： 从B开始的每第A个元素。

功能符号示例

示例	代表
:nth-child(odd)	奇数元素：1、3、5...
:nth-child(even)	偶数元素: 2、4、6...
:nth-child(2n+1)	奇数元素：1(2×0+1)、3(2×1+1)、5(2×2+1)... 等效 :nth-child(odd)
:nth-child(2n)	偶数元素：2(2×1)、4(2×2)、6(2×3)... 等效 :nth-child(even)。请注意，0_(2×0)_是一个有效的符号，然而它不匹配任何元素，因为索引从1开始。
:nth-child(7)	第7个元素
:nth-child(n+7)	所有从第7个开始的元素: 7(0+7)、8(1+7)、9(2+7)...
:nth-child(3n+4)	从第4开始的每第3个元素：4(3×0+4)、7(3×1+4)、10(3×2+4)、13(3×3+4)...
:nth-child(-n+3)	前3个元素: 3(-1×0+3)、2(-1×1+3)、1(-1×2+3)。所有后续的索引数都小于1，所以没有元素能够匹配。

线上 nth-child 和 nth-last-child 测试工具

通过下面的网站可以很容易地测试nth-child和nth-last-child。 nth-child-tester