选择器

OfType
XAML
C#
<Style Selector="Button">
<Style Selector="local|Button">
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
C#
<Style Selector="#myButton">
<Style Selector="Button#myButton">
new Style(x => x.Name("myButton"));
new Style(x => x.OfType<Button>().Name("myButton"));
使用#字符按控件的Name属性选择一个控件。
Class
XAML
C#
<Style Selector="Button.large">
<Style Selector="Button.large:focus">
new Style(x => x.OfType<Button>().Class("large"));
new Style(x => x.OfType<Button>().Class("large").Class(":focus"));
选择一个具有指定样式类的控件。多个类用.字符分开，如果是伪类则用:字符。如果指定了多个样式类，那么控件必须有所有必要的样式类才能够匹配。
Is
XAML
C#
<Style Selector=":is(Button)">
<Style Selector=":is(local|Button)">
new Style(x => x.Is<Button>());
new Style(x => x.Is(typeof(Button)));
这与OfType选择器非常相似，只是它也匹配派生类型。
同样，对象的类型实际上是通过查看其IStyleable.StyleKey属性来确定的。
Child
XAML
C#
<Style Selector="StackPanel > Button">
new Style(x => x.OfType<StackPanel>().Child().OfType<Button>());
Child选择器是通过用>字符分隔两个选择器来定义的。此选择器匹配逻辑树中的直接子元素，因此在上面的例子中，选择器将匹配作为StackPanel的直接逻辑子元素的任何Button。
Descendant
XAML
C#
<Style Selector="StackPanel Button">
new Style(x => x.OfType<StackPanel>().Descendant().OfType<Button>());
当两个选择器用空格分隔时，选择器将匹配逻辑树中的后代(Descendant)，因此在这种情况下，选择器将与作为StackPanel逻辑后代的任何Button匹配。
PropertyEquals
XAML
C#
<Style Selector="Button[IsDefault=true]">
new Style(x => x.OfType<Button>().PropertyEquals(Button.IsDefaultProperty, true));
匹配将某个具体属性设置为某个具体值的所有控件。
注意： 在XAML内部的选择器中使用AttachedProperty时，必须用小括号包装。
<Style Selector="TextBlock[(Grid.Row)=0]">
注意： 在XAML中使用选择器时，属性必须支持TypeConverter​
Template
XAML
C#
<Style Selector="Button /template/ ContentPresenter">
new Style(x => x.OfType<Button>().Template().OfType<ContentPresenter>());
匹配控件模板中的控件。这里列出的所有其他选择器都作用在逻辑树上。如果要在控件模板中选择控件，则必须使用此选择器。该示例选择Button模板中的ContentPresenter控件。
Not
XAML
C#
<Style Selector="TextBlock:not(.h1)">
new Style(x => x.OfType<TextBlock>().Not(y => y.Class("h1")));
取反内部选择器。
Or
XAML
C#
<Style Selector="TextBlock, Button">
new Style(x => Selectors.Or(x.OfType<TextBlock>(), x.OfType<Button>()))
查找任意一个与这些选择器中匹配的元素。每个选择器用,分开。
Nth Child
XAML
C#
<Style Selector="TextBlock:nth-child(2n+3)">
new Style(x => x.OfType<TextBlock>().NthChild(2, 3));
根据元素在一组邻近元素中的位置来匹配。
Nth Last Child
XAML
C#
<Style Selector="TextBlock:nth-last-child(2n+3)">
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​

示例	代表
`: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，所以没有元素能够匹配。

最近更新 3mo ago