CSS-Day3

语法

伪类的语法：

selector:pseudo-class {property:value;}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value;}

CSS :first-child 伪类

您可以使用 :first-child 伪类来选择父元素的第一个子元素。

p:first-child
{
    color:blue;
}

匹配所有<p> 元素中的第一个 <i> 元素

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

p > i:first-child
{
    color:blue;
}

匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

p:first-child i
{
    color:blue;
}

CSS - :lang 伪类

q:lang(no) {quotes: "~" "~";}

:first-line 伪元素

"first-line" 伪元素用于向文本的首行设置特殊样式。

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

:first-letter 伪元素

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

CSS 导航栏

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>