CSS符合选择器
交集选择器
交集选择器使用的方法是HTML标签+类选择器，具体的表现形式如下：p.one 其中p是HTML中的<p>的标签，.one是类选择器的书写形式，使用<p class="one">123</p>。
交集选择器,相交的部分就是要设置属性值的标签,即使用相交选择器，会覆盖掉原有的属性值：
1,格式:
选择器1选择器2...{
属性:值;
}
2,注意点:
(1),选择器之间没有任何的连接符号
(2),选择器可以是标签名称,也可以是id、class名称
(3),交集选择器仅仅是了解
并集选择器
多个选择器用逗号分隔，所有的选择器都能实现后面的样式，例如：a , p , .one , #id {}
并集选择器
1,格式:
选择器1,选择器2,...{
属性:值;
}
2,注意点:
(1),选择器之间利用,连接
(2),选择器可以是标签名称,也可以是id、class名称
兄弟选择器
-
+选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。 -
~ 选择器
作用是查找某一个指定元素的后面的所有兄弟结点。
注意二者都是兄弟选择器，前者作用的是后一个元素，后者作用的是后面的所有兄弟元素，二者都有相同的父元素。
兄弟选择器,只选中同级的标签
1, 相邻兄弟兄弟选择(css2)
格式:
选择器1+选择器2{
属性:值;
}
注意点:
(1),相邻选择器必须用+链接
(2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签
2, 通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中
选择器1~选择器2{属性:值;}
后代选择器
外层的标签写在前面,内层标签写在后面 ,示例如下:
div p {} 解释 : div 标签中 有 p标签 比如 : <div> <p> </p> </div>
可以在前面加上类或者ID选择器, 只要标签上有该class 或者id属性 ,选择器的嵌套尽量不超过三级 。
子元素选择器
语法: .nav > li 大于号前后用空格分开, 表示只选择第一层的子元素 ,如 .nav > li 只选择 .nav下的li元素, li 下的 元素不选择 <ul class="nav" ><li> </li> </ul>
PS:实验发现,如果不借助 class的属性, 即父元素是类选择器, 而是使用ul 即 ul > li 则会连第三层也选择上．
属性选择器
选择具有特殊属性的标签
- a[title] {} 选择 a标签中有title属性的进行样式的改变
- input[type=text] {} 选择有特殊属性,并且特殊属性的值与给出值一样的进行样式改变
- div[class^=font] {} ^= 表示以等号后面的值为开头的值的选择出来,进行css样式改变
- div[class
= 表示将等号后面的值作为结尾的标签选择出来
- div[class*=tao] {} *= 表示将等号后面的值,有与之匹配的找出来,不管哪个位置
上述的前提是有该属性的标签,并且标签中的属性的值与上述相同的值
伪元素选择器
语法:E::first-letter 解释: E表示标签 ,主要有以下几种:
- E::first-letter 表示第一个单词
- E::first-line 表示第一行
- E::selection 选中文字后,文字的变换, 比如字体颜色的改变
- E::before E::after 花括号中必须有 content属性 .在盒子的内部的前面或后面放内容
简单使用: div::before { content: "a" ;} <div> bc</div> 页面输出结果为 abc
参考：
https://blog.csdn.net/Pruett/article/details/77912878
https://blog.csdn.net/u014291497/article/details/50482874
https://blog.csdn.net/qq_21826709/article/details/80482550
网友评论