CSS3新增的属性选择器、关系选择器、结构化选择器

鳄鱼君

发表文章数:523

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS3新增的属性选择器、关系选择器、结构化选择器

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新增的选择器 伪元素选择器、链接伪类

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS3新增的属性选择器、关系选择器、结构化选择器》 发布于2020-04-27

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

8 + 4 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册