关于CSS样式的总结

CSS符合选择器

交集选择器

交集选择器使用的方法是HTML标签+类选择器,具体的表现形式如下:p.one 其中p是HTML中的

的标签,.one是类选择器的书写形式,使用

123

交集选择器,相交的部分就是要设置属性值的标签,即使用相交选择器,会覆盖掉原有的属性值:
1,格式:
选择器1选择器2...{
属性:值;
}
2,注意点:
(1),选择器之间没有任何的连接符号
(2),选择器可以是标签名称,也可以是id、class名称
(3),交集选择器仅仅是了解

并集选择器

多个选择器用逗号分隔,所有的选择器都能实现后面的样式,例如:a , p , .one , #id {}

并集选择器
1,格式:
选择器1,选择器2,...{
属性:值;
}
2,注意点:
(1),选择器之间利用,连接
(2),选择器可以是标签名称,也可以是id、class名称

兄弟选择器
  1. +选择器
    如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

  2. ~ 选择器
    作用是查找某一个指定元素的后面的所有兄弟结点。

注意二者都是兄弟选择器,前者作用的是后一个元素,后者作用的是后面的所有兄弟元素,二者都有相同的父元素。

兄弟选择器,只选中同级的标签
1, 相邻兄弟兄弟选择(css2)
格式:
选择器1+选择器2{
属性:值;
}
注意点:
(1),相邻选择器必须用+链接
(2),相邻选择器只能选中紧跟后边的那个标签,不能选中被隔开的标签

2, 通用兄弟选择器(css3),指定选择器后边特定的所有选择器都被选中
选择器1~选择器2{属性:值;}

后代选择器

外层的标签写在前面,内层标签写在后面 ,示例如下:
div p {} 解释 : div 标签中 有 p标签 比如 :


可以在前面加上类或者ID选择器, 只要标签上有该class 或者id属性 ,选择器的嵌套尽量不超过三级 。

子元素选择器

语法: .nav > li 大于号前后用空格分开, 表示只选择第一层的子元素 ,如 .nav > li 只选择 .nav下的li元素, li 下的 元素不选择


PS:实验发现,如果不借助 class的属性, 即父元素是类选择器, 而是使用ul 即 ul  > li 则会连第三层也选择上.

属性选择器

选择具有特殊属性的标签

  1. a[title] {} 选择 a标签中有title属性的进行样式的改变
  2. input[type=text] {} 选择有特殊属性,并且特殊属性的值与给出值一样的进行样式改变
  3. div[class^=font] {} ^= 表示以等号后面的值为开头的值的选择出来,进行css样式改变
  4. div[class= 表示将等号后面的值作为结尾的标签选择出来
  5. div[class*=tao] {} *= 表示将等号后面的值,有与之匹配的找出来,不管哪个位置
    上述的前提是有该属性的标签,并且标签中的属性的值与上述相同的值
伪元素选择器

语法:E::first-letter 解释: E表示标签 ,主要有以下几种:

  1. E::first-letter 表示第一个单词
  2. E::first-line 表示第一行
  3. E::selection 选中文字后,文字的变换, 比如字体颜色的改变
  4. E::before E::after 花括号中必须有 content属性 .在盒子的内部的前面或后面放内容
    简单使用: div::before { content: "a" ;}
    bc
    页面输出结果为 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

你可能感兴趣的:(关于CSS样式的总结)