CSS选择器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS选择器,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3295字,纯文字阅读大概需要5分钟。
内容图文
![CSS选择器](/upload/InfoBanner/zyjiaocheng/1014/4d5dbf5fb9524723890941b7cd5927e8.jpg)
1、基本选择器
1.1 通配符选择器
通配符选择器又称为通用元素选择器,会匹配所有的元素,对所有元素都生效。语法为*{}:
*{margin:0;padding:0}
1.2 ID选择器
ID选择器是比较常用的选择器之一,使用方式就是#id名{},例如:
<div id='main'> id选择器</div>
#main{margin:0;}
1.3 类选择器
类选择器又叫class选择器,也属于比较常用的选择器之一,使用方式就是.class名{},例如:
<div class='main'> class选择器</div>
.main{margin:0;}
1.4 元素选择器
元素选择器又叫做标签选择器,主要是根据HTML的标签来选择。语法为标签名{},例如
<div><span>元素选择器</span></div>
div{margin:0;}span{padding:10px;}
1.5 属性选择器
属性选择器是通过标签里面有些属性值来进行选择,语法为标签名[属性值]
ex1:把包含标题的所有元素的字体颜色设置为蓝色:
*[title] {color:blue;}
ex2:只对有 href 属性的a标签设置字体颜色:
a[href] {color:red;}
ex3:对name属性值等于‘abc’的标签设置样式
form[name='abc']{color:red;}
2、组合选择器
组合选择器主要是对多个标签设置样式,例如:
<div id="main"><div class="box"><span>组合选择器</span></div></div>
/* 给div标签并且类名为box的标签设置样式 */div.box{margin:0;}/* 给div,span标签和.box类设置样式*/div,span,.box{margin:0}
3、关系选择器
关系选择器包括子选择器、后代选择器、兄弟选择器和相邻兄弟选择器
3.1 子选择器
子代选择器主要是对当前标签的直系子代进行选择,通俗的说就是只会选择儿子辈,不会选择孙子辈和其他后代辈。语法为父标签名>子代标签名
<div><p><span>子代选择器</span></p></div>
/* 有效 */div>p{margin:0;}/* 无效 */div>span{margin:0;}
3.2 后代选择器
后代选择器可以说是既包括儿子辈的,又包括孙子辈的标签元素。语法为父标签 后代标签
<div><p><span>后代代选择器</span><p><a>Baidu</a></p></p></div>
/*div中所有的p标签都会应用这个样式*/div p{margin:0;}
3.3 相邻兄弟选择器
相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签,只会对这一个标签有用,其他的兄弟标签不会生效。语法为兄弟标签+兄弟标签{}
<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>
/* 只会对box2生效 */.box+span{color:red;}
3.4 兄弟选择器
相邻兄弟选择器指的是当前元素的后一个相邻的兄弟标签,只会对这一个标签有用,其他的兄弟标签不会生效。语法为兄弟标签~兄弟标签{}
<div><span class='box1'></span><span class='box2'></span><span class='box3'></span><span class='box4'></span></div>
/* 会对box2,3,4都生效 */.box~span{color:red;}
4、伪类选择器
什么是伪类?
伪类用于定义元素的特殊状态。
例如,它可以用于:
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
伪类选择器的语法:标签名:伪类名{}
/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF;}
更多伪类参考**菜鸟教程**
5、伪元素选择器
什么是伪元素?
CSS 伪元素用于设置元素指定部分的样式。
例如,它看用于:
- 设置元素的首字母、首行的样式
- 在元素的内容之前或之后插入内容
伪元素选择器的语法为标签名::伪元素名{}
/* ::first-line 伪元素用于向文本的首行添加特殊样式。 下面的例子为所有 <p> 元素中的首行添加样式: */p::first-line { color: #ff0000; font-variant: small-caps;}/* ::before 伪元素可用于在元素内容之前插入一些内容。 */h1::before { content: url(smiley.gif);}/* ::after 伪元素可用于在元素内容之后插入一些内容。 */h1::after { content: url(smiley.gif);}
更多伪元素参考**菜鸟教程**
6、选择器优先级
CSS选择器的优先级按照下面的顺序从高到低进行排列。
!important
内联样式/行内样式
ID选择器(#ID{})
类选择器(.class{})
元素选择器(div{})
通配符选择器(*{})
继承样式(*{})
内容总结
以上是互联网集市为您收集整理的CSS选择器全部内容,希望文章能够帮你解决CSS选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。