选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
通配符选择器
通配符选择器顾名思义就是通用的,会对所有的标签生效,但其权重很低,会被之后书写的权重更高的代码所覆盖。(权重问题后面会额外的说明)
通配符选择器的语法为:
*{
属性:属性值;
}
eg:
<style>
*{
margin:0;
padding:0;
}
</style>
标签选择器
标签选择器通俗的理解就是使用标签名作为选择器名称,例如div、input、a等等,这样会为所有的该标签设置样式,所以一般很少用到
标签选择器的语法为:
标签名(例:div){
属性:属性值;
}
eg:
<style>
div{
width: 200px;
height: 200px;
background:red;
}
</style>
ID选择器
id选择器中的id是不能重复的,id就像是每个人的身份证一样,是每个人独有的,在css中id是每个标签独有的。
id选择器的语法为:
#id名称{
属性:属性值;
}
eg:
<style>
#dome{
background-color:#00f;
}
</style>
/* body里面 */
<div id="dome">测试</div>
类选择器
类选择器是常用的选择器之一,之所以常用类选择器而不是id选择器的原因和id是唯一值有关,当我们需要为多个不同标签设置相同属性的时候,我们可以将他们的class名字取一样的,这样可以减少代码冗余
类选择器的语法为:
.类名(即class名称){
属性:属性值;
}
eg:
<style>
.a1{
width: 200px;
height: 50px;
background: yellowgreen;
}
</style>
/* body里面 */
<div class="a1">我是块元素</div>
包含选择器
包含选择器又名后代选择器,是可以多个选择器叠加使用,并且后面的是前面所指标签的子元素。(看例子基本就可以明白了)
包含选择器的语法为:
父元素的选择器(可以是id选择器,也可以是类选择器){
属性:属性值;
}
eg:
<style>
.a1 img{ /*这里理解为class名为a1的父元素下的img标签*/
width:100%;
}
</style>
/* body里面 */
<div class="a1">
<img src="../images/banner.jpg" alt="">
</div>
不常用的选择器:
层级选择器
层级选择器是通过元素间的层次关系获取元素,主要层次关系有:后代(上一个已经说到了)、父子、相邻兄弟和通用兄弟
层级选择器的语法为:
①父子:
.父元素>子元素{
属性:属性值;
}
②相邻兄弟:
.父元素+兄弟{
属性:属性值;
}
③通用兄弟:
.父元素~兄弟{
属性:属性值;
}
eg:
<style>
.a1>img{ /*这里理解为class名为a1的父元素下的img标签 子元素*/
width:100%;
}
.a1+img{ /*这里理解为class名为a1后面唯一的兄弟 代码中是指p中的img标签*/
width:100%;
}
.a1~img{ /*这里理解为class名为a1后面所有的兄弟 代码中是指p中的img标签和a中的img */
width:100%;
}
</style>
/* body里面 */
<div class="a1">
<img src="../images/banner.jpg" alt="">
</div>
<p>
你好啊!
<span>张三</span>
<img src="../images/banner.jpg" alt="">
</p>
<a href="">
<img src="../images/banner.jpg" alt="">
</a>
伪类选择器
伪类选择器并不是常用的选择器,所以在这里知识作为简单的介绍一下分类。后续可能会出详细的分析。
伪类选择器我们可能常用一点的有四类:
结构性伪类选择器:
:nth-child()
:nth-of-type()
动态伪类选择器:
:link
:visited
:hover
:active
:focus
UI元素状态伪类选择器:
:enable
:disable
:checked
::selection
否定伪类选择器:
not
属性选择器
属性选择器也是不常用的选择器之一
属性选择器的语法为:
标签名(id/类)[属性=“属性值”]{
属性:属性值;
}
eg:
<style>
input[type="submit]{
}
*[class="a"]{ /* 等同于 .a */
}
</style>
/* body里面 */
<div class="a">
<input type="submit">
<input type="text">
</div>