html选择器,css选择器,复杂,聚合,选择器,属性,派生,伪类,交集选择器

本博客主题

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

¥69 现在购买

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

1.聚合选择器:

同时对几个选择器进行相同的操作,好几个地方需要相同的设定,可以合并来写

p,h1,#psw,.p1{
属性:属性值;
}
列举:
<style>
      h1,p,.red{
          color:red;
      }
    </style>
</head>
<body>
        <h1 >聚合选择器</h1>    
        <p class="red">这是p1</p>
        <p class="red">这是p2</p>
        <p>这是p3</p>
</body>

2.属性选择器:

举例:
<a class="blank" href="#" target="_blank">这个链接的target是blank</a></br>
<a class="no blank" href="#" target="_self">这个链接的target是self</a></br>
<a href="#" >这个链接没写target</a>
①标签名[属性名]{}
a[href]{
color:red;
}
②标签名[属性名][属性名]{}
a[target][href]{
color:red;
}
③标签名[属性名=属性值]{}属性值必须完全符合才可以(绝对匹配)
a[target="_self"]{
color:red;
}
④标签名[属性名~=属性值]{}只要有相同的元素即可(模糊匹配)
a[class~="blank"]{
color:red;
}

3.派生选择器:

包括:后代选择器、子元素选择器、相邻兄弟选择器

①后代选择器(包含选择器):

主要是用于对容器对象中的子对象进行控制,使其他容器对象的同名子对象不受影响
容器对象在前,子对象在后,中间为空格

<style>

p strong{
color:red;
}
</style>

<body>
<strong>我是加粗的字</strong>
<p>这是段落标签中的内容,<strong>我是红色的字</strong></p>
<p>这是段落标签中的内容,<span><strong>我也是红色的字</strong></span></p>
</body>

样式会应用到p元素的所有strong元素中,不管中间是否还有其他元素隔开

②子元素选择器:
如果不希望应用到所有该后代的相同元素上,那么需要用子元素选择器
如果是>,则只会应用到他的直系后代

<style>

p>strong{
color:red;
}
</style>
</head>
<body>
<strong>我是加粗的字</strong>
<p>这是段落标签中的内容,<strong>我是红色的字</strong></p>
<p>这是段落标签中的内容,<span><strong>我不再是红色的字</strong></span></p>

</body>

③相邻兄弟选择器
兄弟关系,和strong元素相邻的p元素发生样式变化

<style>

strong + p{
color:red;
}
</style>

4.伪类选择器
通常是给超链接的不同状态加样式
正常状态 link
访问过的状态:visited
放上状态:hover
激活状态:active
注意:需要严格按照以上顺序来写

<style>

a.baidu:link{color:#ff0000}
a.baidu:visited{color:#00ff00}
a.baidu:hover{color:#ff00ff}
a.baidu:active{color:#0000ff}
</style>
<b><a class="baidu" href="#" target="_blank">百度</a></b>

5.交集选择器

两个选择器共同的部分

<style>
p{color:red;}
.special{color:green;}
p.special{font-size:40px;}
</style>

<body>
<h1 class="special">这是一个标题</h1>
<p>这是一个段落</p>
<p class="special">这是一个交集选择器做出的效果</p>

</body>

作业:

①使用列表来做
②通过开发者工具查看css样式,并设置成相同的样式
③使用伪类选择器将所有的超链接设置成如下样式:
显示:color为#ff0000
访问后:color为#00ff00
鼠标放在上面的时候color为#ff00ff
鼠标单击时color为0000ff

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《html选择器,css选择器,复杂,聚合,选择器,属性,派生,伪类,交集选择器》 发布于2019-04-12

分享到:
赞(0) 打赏

评论 抢沙发

4 + 8 =


html选择器,css选择器,复杂,聚合,选择器,属性,派生,伪类,交集选择器

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

79代刷网
代刷网各种代刷 售后有保证 代做各种网站有需要留言给我即可!
切换注册

登录

忘记密码 ?

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

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

注册