一、css常用选择器和伪类
（1）id 选择器
每一个标签都要求有唯一的id，此属性可以用于CSS选择器选择。
例如：#blue{};#haha{}
#blue{
color: blue;
}
（2）元素选择器
使用标签的标签名进行选择。
例如：p{};h1{};h2{};div{}
p{
color:red;
}
（3）class 选择器
在标签中设置标签的class属性（可以重复），用过使用 . + class名，选中。
例如：.haha{}；.nimei{}
.class_name{
color:red;
}
（4）通配选择器
所有元素：*{}
*{}
（5）交集选择器
交集选择器：选中同时符合多个条件的元素 选择器1选择器2{}
.green, .red{
/* 交集选择器 */
color: gray;
}
（6）并集选择器
并集选择器：同时选择多个选择器 选择器1，选择器2{}
div.red{
/* 并集选择器 */
font-size: 40px;
}
（7）关系选择器
- 子元素选择器：父元素> 子元素
- 后代选择器：中间使用空格
-兄弟选择器：使用+号表示下一个，~表示所有兄弟
<style>
/*子元素选择器：父元素> 子元素*/
div.box>p{
color: hotpink;
}
/* 后代选择器 :空格*/
div.houdai p.hd span.hd{
color: skyblue;
}
/* 兄弟选择器 :加号表示下一个，~表示下边所有*/
p.bro2 ~ p{
color: yellow;
}
p.bro1 + p{
color: purple;
}
</style>
<body>
<!-- -----------------交/并选择器--------------------- -->
<span class="sky">first</span>
<div class="red">i am a div!</div>
<p id="red">i am a p!</p>
<br><br><br>
<!-- -----------------子选择器--------------------- -->
<div class="box nihao">
我是一个div
<p>
我是div中的p元素<br>
<span>
我是div-p中的span元素！
</span>
</p>
<span>我是div中的span元素</span>
</div>
<br><br><br>
<!-- -----------------后代选择器--------------------- -->
<div class="houdai">
i am div grandfather.
<p class="hd">
i am span's father.<br>
<span class="hd">
i am p's son.
</span>
</p>
</div>
<br><br><br>
<!-- -----------------兄弟选择器--------------------- -->
<div class="dad">
here is the father!
<p class="bro1">here is bro1!</p>
<p class="bro2">here is bro2!</p>
<p class="bro3">here is bro3!</p>
<p class="bro4">here is bro4!</p>
</div>
</body>
（8）继承样式
样式的继承：给父标签设置的属性会发生在子标签里面
所有的都会被继承，背景，布局，字体颜色，字体大小……
继承的设计是为了方便开发；利用继承可以将一些通用的样式设置到一起
body{
/* 子元素也会有相应格式，但子元素如果也设置了相关样式，则会将原来的样式覆盖 */
font-size: large;
}
（9）伪元素
伪元素：表示在页面中一些特殊的并不存在的元素（特殊的位置）
使用：：开头
- ::first-letter表示第一个字母
- ::first-line表示第一行
- ::selection表示选中的文字
- ::before元素的开始
- ::after元素的最后
before和after要配合conent使用
<style>
p{
font-size: large;
}
p::first-letter{
font-size: 50px;
}
p::first-line{
background-color: yellow;
}
p::selection{
background-color: skyblue;
}
div::before{
/* 会在前面显示一个@ */
content: "@";
color: gray;
}
q{
font-size: smaller;
color: green;
}
</style>
（10）伪类
伪类：（不存在的元素）
- 用来描述一个特殊状态的元素
例如：第一个子元素，被点击的元素，鼠标移入的元素。。。 - first-child:第一个子元素
- last-child:最后一个子元素
- nth-child（n）:选中第n个子元素,、；n表示0~正无穷；2n（even）表示偶数；2n+1（odd）表示奇数
- first-of-type:
- last-of-type:
- nth-of-type():只找相同类型的子元素；
- not（）；否定伪类：将符合条件的元素从选择器中剔除
例：第三个列不变黄
ul > li:not(:nth-of-type(3)){
color = "yellow";
} - 一般上是：开头
<style>
ul > li:first-child{
color: red;
}
ul > li:nth-child(5){
color: green;
}
</style>
（11）超链接的伪类
可以通过超链接的伪类对超链接的样式进行改变。废话不多说，看代码
<style>
/*
link:用来表示没访问过的链接（正常的链接）
*/
a:link{
color: orange;
}
/*
visited:用来表示访问过的链接（正常的链接）
由于隐私的问题，所以只能改颜色
*/
a:visited{
color: gray;
}
/*:hover 用来表示鼠标的移入状态 */
a:hover{
color:yellowgreen;
}
/* :active 用来表示鼠标的点击状态 */
a:active{
color: blue;
}
</style>
css优先级：https://www.jianshu.com/p/19f215c6b737
引入css的方法：https://www.jianshu.com/p/243d346763a8
网友评论