子元素选择器
用一个">"符号。
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;
}