自学内容网 自学内容网

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>


原文地址:https://blog.csdn.net/m0_74039531/article/details/142625843

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!