CSS3中新增了多种选择器,通过学习大家可以更轻松的控制网页的布局。属性选择器可以根据元素的属性值来选择元素。CSS3中新增了3中属性选择器。
CSS3新增的属性选择器
E[att^=value]属性选择器是指选择名称为E的标记,且该标记等一流att属性,att属性值包含前缀为value的字符串。E可以省略,省略表示匹配满足条件的任意元素。我们来看一个简单的例子:
div[id^=section] #表示匹配包含id属性,且id属性值是以section字符串开头的div元素
E[att$=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含后缀为value的字符串。与前缀选择器一样,E可以省略,省略表示匹配满足条件的任意元素。我们来看一个简单的例子:
div[id$=section] #表示匹配包含id属性,且id属性是以section字符串结尾的div元素
E[att*=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含value的字符串。与前面的两种选择器一样,E可以省略,省略表示匹配满足条件的任意元素。我们来看一个简单的例子:
div[id*=section] #表示匹配包含id属性,且id属性值包含section字符串的div元素
CSS3新增的关系选择器
CSS3中的关系选择器主要包括子代选择器和兄弟选择器,其中子代选择器由符号“>”连接,兄弟选择器由符号“+”和“~”连接。
子代选择器
主要用来选择某个元素的第一级子元素。例如:希望选择只作为h1元素子元素的strong元素。可以写为:h1 > strong。
<style type="text/css">
h3>strong{ /*选择h3下的strong标签*/
color: red;
font-size: 30px;
font-family: "微软雅黑"
}
</style>
<h3>迷人的<strong>鳄鱼君Ba</strong>先生</h3>
<h3><em>鳄鱼君Ba<strong>欢迎你!</strong></em></h3>
strong标签是h3标签的子元素,所以会选择第一个h3标签。第二个strong元素是h3的孙元素,所以不会添加对应的css样式。
临近兄弟选择器兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。它分为临近兄弟选择器和普通兄弟选择器。临近兄弟选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父亲,而且第二个元素必须紧跟第一个元素。
<style type="text/css">
p+h3{color: green;font-family: "微软雅黑";font-weight: bold;}
</style>
<h3>静夜思</h3>
<p>床前明月光</p>
<h3>疑是地上霜</h3>
<h3>举头望明月</h3>
<h3>低头思故乡</h3>
以上代码会选择p的下一个兄弟元素h3,也就是p元素紧跟的h3元素,其它的h3元素不会被选择
普通兄弟选择器普通兄弟选择器使用“~”来连接前后两个选择器。选择器中的两个元素有同一个父亲,但第二个元素不必紧跟第一个元素。
<style type="text/css">
p~h3{color: green;font-family: "微软雅黑";font-weight: bold;}
</style>
<h3>静夜思</h3>
<p>床前明月光</p>
<h3>疑是地上霜</h3>
<h3>举头望明月</h3>
<h3>低头思故乡</h3>
h3元素不必紧跟p元素,也就是会选择p元素下的所有h3元素。
CSS3新增的伪类选择器
:root选择器用于匹配文档根元素,在HTML中,根元素始终是html元素。使用“:root选择器”定义的样式,对所有页面元素都生效。对于不需要该样式的元素,可以单独设置样式进行覆盖。
<style type="text/css">
:root{color: red;}
h3{color: blue;}
</style>
<h3>《面朝大海春暖花开》</h3>
<p>从明天起做一个幸福的人,喂马劈柴周游世界,从明天起关心粮食和蔬菜,我有一所房子,面朝大海春暖花开!</p>
页面中所有的字体颜色为红色,h2标签颜色为蓝色。h2元素定义的样式覆盖的root选择器的样式。如果没有指定h2元素样式,那么所有的字体颜色都为红色。
如果对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式,可以使用“:not选择器”。
<style type="text/css">
body *:not(h2){ /*样式不应用与h2标签*/
color: orange;
font-size: 24px;
font-family: "微软雅黑"
}
</style>
<h3>世界上最远的距离</h3>
<p>世界上最远的距离</p>
<p>不是生与死的距离</p>
<p>而是我站在你面前</p>
<p>你却不知道我爱你</p>
:only-child选择器用于匹配属于某父元素的唯一子元素的元素,也就是说,如果某一个父元素仅有一个子元素,则使用“:only-child选择器”可以选择这个子元素。我们来看一个简单的案例:
<style type="text/css">
li:only-child{color: red;} /*ul元素只有一个li元素*/
</style>
<div>
精彩电影
<ul>
<li>终结者3:黑暗命运</li>
<li>非诚勿扰</li>
</ul>
日本动漫
<ul>
<li>蜡笔小新</li>
<li>火影忍者</li>
<li>一拳超人</li>
</ul>
伦理电影
<ul>
<li>妻子的朋友</li>
</ul>
</div>
:first-child选择器和:last-child选择器分别用于为父元素中第一个或者最后一个子元素设置样式。我们来看一个简单例子:
<style type="text/css">
p:first-child{color: red;font-size: 30px;font-family: "微软雅黑"} /*设置第一个p元素*/
p:last-child{color: blue;font-size: 20px;} /*设置最后一个p元素*/
</style>
<p>第一篇 长大了</p>
<p>第二篇 毕业了</p>
<p>第三篇 结婚了</p>
<p>第四篇 享受生活</p>
:empty选择器用来选择没有子元素或文本内容为空的所有元素。
<style type="text/css">
p{
width: 150px;
height: 30px;
}
:empty{background-color: #999;} /*将空p元素的背景设置为灰色*/
</style>
<p>第一篇 长大了</p>
<p>第二篇 毕业了</p>
<p>第三篇 结婚了</p>
<p></p>
<p>第四篇 享受生活</p>
有关伪元素选择器,链接伪类的内容可参考:CSS3新增的选择器 伪元素选择器、链接伪类。
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!