选择器
OfType
<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选择器。
Name
<Style Selector="#myButton">
<Style Selector="Button#myButton">new Style(x => x.Name("myButton"));
new Style(x => x.OfType<Button>().Name("myButton"));使用#字符按控件的Name属性选择一个控件。
Class
<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
<Style Selector=":is(Button)">
<Style Selector=":is(local|Button)">new Style(x => x.Is<Button>());
new Style(x => x.Is(typeof(Button)));这与OfType选择器非常相似,只是它也匹配派生类型。
Child
<Style Selector="StackPanel > Button">new Style(x => x.OfType<StackPanel>().Child().OfType<Button>());Child选择器是通过用>字符分隔两个选择器来定义的。此选择器匹配逻辑树中的直接子元素,因此在上面的例子中,选择器将匹配作为StackPanel的直接逻辑子元素的任何Button。
Descendant
<Style Selector="StackPanel Button">new Style(x => x.OfType<StackPanel>().Descendant().OfType<Button>());当两个选择器用空格分隔时,选择器将匹配逻辑树中的后代(Descendant),因此在这种情况下,选择器将与作为StackPanel逻辑后代的任何Button匹配。
PropertyEquals
<Style Selector="Button[IsDefault=true]">new Style(x => x.OfType<Button>().PropertyEquals(Button.IsDefaultProperty, true));匹配将某个具体属性设置为某个具体值的所有控件。
Template
<Style Selector="Button /template/ ContentPresenter">new Style(x => x.OfType<Button>().Template().OfType<ContentPresenter>());匹配控件模板中的控件。这里列出的所有其他选择器都作用在逻辑树上。如果要在控件模板中选择控件,则必须使用此选择器。该示例选择Button模板中的ContentPresenter控件。
Not
<Style Selector="TextBlock:not(.h1)">new Style(x => x.OfType<TextBlock>().Not(y => y.Class("h1")));取反内部选择器。
Or
<Style Selector="TextBlock, Button">new Style(x => Selectors.Or(x.OfType<TextBlock>(), x.OfType<Button>()))查找任意一个与这些选择器中匹配的元素。每个选择器用,分开。
Nth Child
<Style Selector="TextBlock:nth-child(2n+3)">new Style(x => x.OfType<TextBlock>().NthChild(2, 3));根据元素在一组邻近元素中的位置来匹配。
Nth Last Child
<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
最后更新于
这有帮助吗?
