目录
一、常用的选择器
1.元素选择器
2.类选择器(class选择器)
3.id选择器
4.通配符选择器
二、群组选择器
三、关系选择器
1.后代选择器
2.子代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
5.案例
四、属性选择器
五、伪类选择器
1.常用的伪类选择器
2.否定伪类
3.元素的伪类
六、伪元素选择器
1.元素选择器
语法 : 标签名{}
作用 : 选中对应标签中的内容
例:p{} , div{} , span{} , ol{} , ul{} ......
2.类选择器(class选择器)
语法 : .class属性值{}
作用 : 选中对应class属性值的元素
例子 : <p class="A">段落1</p>
<p class="B">段落1</p>
<p class="C">段落1</p>
.A{} , .B{} , .C{} ......
注意:class里面的属性值不能以数字开头,如果以符号开头,只能是'_'或者'-'这两个符号,其他的符号不可以,一个class里面可以有多个属性值
3.id选择器
语法 : #id属性值{}
作用 : 选中对应id属性值的元素
例子 : <p id="A">段落1</p>
<p id="B">段落1</p>
<p id="C">段落1</p>
#A{} , #B{} , #C{} ......
注意 : id的属性值只能给1个,可以重复利用,不能以数字开头
4.通配符选择器
语法 : *{}
作用 : 让页面中所有的标签执行该样式,通常用来清除间距
例子 : *{
margin: 0; //外间距
padding: 0; //内间距
}
语法 : 选择器1,选择器2,选择器3...{}
作用 : 同时选中对应选择器的元素
例子 :
1.后代选择器
后代选择器也叫包含选择器，祖先元素直接或间接的包含后代元素
2.子代选择器
父元素直接包含子元素,子元素直接被父元素包含
3.相邻兄弟选择器
以上面的代码为例,除了内容为'44444'的的p标签外,其余的所有元素均为兄弟元素,而相邻兄弟元素就是紧挨着的两个标签
给上述代码加上内部修饰样式:
我们打开页面看看效果:
4.通用兄弟选择器
同样以上面的代码为例,添加一段内部修饰样式:
5.案例
以上面的代码为例,现在有一个需求,想要内容为'5555'的标签自己变换样式,其余的都不变,我们先来分析一下,这个标签很明显,单独选择相邻兄弟元素或者通用兄弟元素都是无法实现只改变p5这个标签,先看看p5标签在.box后面,而.box后面只有一个div标签,刚好p5就是这个div的兄弟元素,代码如下:
属性选择器一共有7种写法
1.某某[属性]
2.某某[属性=属性值]
3.某某[属性^=属性值]
4.某某[属性$=属性值]
5.某某[属性*=属性值]
6.某某[属性~=属性值]
7.某某[属性|=属性值]
举个小案例:
以上代码的默认样式是这样的:
现在在style标签内写入1~7个方法的修饰样式:
现在默认展示的是第七个方法(需要看其他6种方法的同学自行打开其余6种方法的注释),现在选择到的是有a标签,且有属性title,且属性值只有1个是link的或者属性值有多个但是得是link-开头的变,那么就是第一,第三,和第五个,打开页面看看
1.常用的伪类选择器
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个元素
关于:nth-child()的特殊值(括号内的内容可以填写以下几种)
n 第n个 n的范围0到正无穷（全选）
even或2n 选中偶数位的元素
odd或2n+1 选中奇数位得到元素
以child结尾的是在所有元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type() 选中第n个元素
以type结尾的是在相同元素中选择
2.否定伪类
:not() 将符号条件的元素去除
3.元素的伪类
以下两个伪类是所有标签都可以使用
:hover 鼠标移入后元素的状态
:active 鼠标点击后，元素的状态
同伪类一样，伪元素也是不存在的元素，表示元素的特殊状态
常见的几个伪元素：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的元素
::before 元素开始的位置前
::after 元素结束的位置后
befor和after必须配合contend一起使用(before,after所写的内容无法选中且永远在最前和最后)
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/14536.html