#CSS基本选择器
##选择器类型
1、选择所有元素
*{ }
2、根据标签类型选择元素
a{ }
3、根据类选择元素
.class{ }
4、根据id选择元素
#id{ }
5、根据属性选择元素
[href]{ }
[属性名=“属性值”] 选取含有指定属性值的元素
[属性名^=“属性值”] 选取属性值以指定内容开头的元素
$ 结束
* 包含
<a href="XXX">靠谱学院<a>
6、 :选择器动作
a:hover{ }
<a>XXX</a>
##选择器分组,相当于多个选择器的并集
通过选择器分组可以同时选中了多个选择器对应的元素
前面的符号该是啥还是啥
语法:
选择器1,选择器2,选择器N{ }
##复合选择器,相当于多个选择器的交集
可以选中同时满足多个选择器的元素
前面的符号该是啥还是啥
语法:
选择器1选择器2选择器N{ }
##后代元素选择器
选中指定祖先元素的指定后代元素
语法:
祖先元素 后代元素{ } 可以设置多层 如 :
祖先1 后代 后代.....{ }
#d1 span{
设置样式;
}
##子代元素选择器
选中指定父元素的指定子元素
语法:
父元素>子元素
div>span{
设置样式;
}
##伪类选择器
1、XX:link
2、XX:visited (只能定义字体颜色)
3、XX:hover
4、XX:active
**这四个选择器的优先级是一样的
但是link和visited要写在hover和active上面**
##其他
1、获取焦点 xx:focus
获取焦点即为选中某某文本框,
如: 当选中文本框时,设置样式
2、指定元素前 xx:before
before表示元素最前边的部分
一般before都需要结合content(内容)这个样式一起使用
通过content可以想before的位置添加一些内容
3、指定元素后 xx:after
after表示元素的最后边的部分
4、选中的元素 xx::selection
##兄弟元素选择器
1、后一个兄弟元素选择器
作用:可以选中一个元素后紧挨着指定的兄弟元素
语法:前一个 + 后一个
2、选中后边的所有兄弟
语法:前一个~后边所有
##子元素伪类元素选择器
1、选择第一个子标签
:first-child
2、选择最后一个子标签
:last-child
3、选择指定位置的子元素
:nth-child
##样式的继承
像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代元素所继承。所以可以利用继承,可以将一些基本的样式设置给祖先元素,这样他所有的后代元素都会自动继承其样式
**但不是所有的样式都会被子元素所继承,比如:背景相关样式不会被继承**