css选择器再谈

子元素选择器

用一个">"符号。

h1>strong{color:red;}

则其会把h1下的strong中的内容变成红色。

子元素选择器结合后代选择器

ex:

table.company td>p

则其的操作为:对td下的p进行设置,而td属于类名的company 的table 里。

相邻兄弟选择器

用个“+”号即可。

ex:

h1+p{margi-top:50px;}

选择紧接在h1元素后出现的段落。

相邻兄弟选择器结合其他选择器

html>body table+ul{margin-top:20px;}

选择紧接在table后的ul,而而这个table在body内,body在HTML内。

伪类

如链接的几种状态均是伪类

a:link

a:visited

a:hover

a:active

且顺序要严格遵循上面的顺序。

伪类和css类

ex:

a.red:visited{color:red;}

则对类名为red的a进行设置红色。

first-child伪类

ex;

p:first-child{font-weight:bold;}

其意思是将某元素的第一个<p>元素进行设置,而不是吧<p>元素的第一个元素进行设置。

ex

p>i:first-child{font-weight:bold;}

将某元素的第一个<i>元素进行设置,而这里的某元素即为<p>,即将所有的<p>元素中的第一个

<i>元素进行设置。这里将子选择器和伪类选择器结合。

ex:

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

这里将伪类和派生选择器结合。

将作为第一个元素的<p>元素中的所有<i>元素进行设置。

:focus属性

顾名思义,为聚焦。意思是当有键盘输入的时候会有相应的样式。

ex:input:focus{background-color:red:}

则在点击相应的输入框时会点亮背景。

伪元素:

:first-line

对第一行进行设置。

ex: 

p:first-line

{

color:red;

font-variant:small-caps;

}

:first-letter

用于向文本的首字母进行设置。

ex:

p:first-letter

{

color:red;

font-size:50px;

}

之前用float来:

span

{

float:left;

font-size:50px;

font-family:courier;

}

伪元素和css类

ex :

p.article:first-letter

{

color:red;}

使用:

<p class="article">hello,csdn</p>

:before伪元素

可以在元素的前面插入新的内容。

ex:

h1:before

{

content:url;

}

:after伪元素

可以在元素的后面插入新内容。

ex:

h1:after

{

content:url;

}

猜你喜欢

转载自blog.csdn.net/weixin_41060905/article/details/81169325
今日推荐