css选择器、伪元素

2018-06-07 本文已影响0人真的吗_a951

关于伪类选择器

a标签的伪类选择器
顺序：
a:link->a:visited(点击后的样式)->a:hover(鼠标放在链接上的样式)->a:active(鼠标点击时的样式)
E:focus 在元素获得焦点时给元素添加样式，如input的textarea或text
E:disabled 匹配禁用的表单元素
E:enabled 匹配表单中可用的元素
E:checked 匹配被选中的元素(radio/checkbox)
E:selection 匹配用户当前选中的元素
E:nth-child(n) 匹配父元素下的第n个子元素，第一个编号为1
E:nth-last-child(n) 匹配E的父元素下倒数第n个子元素,第一个编号为1
E:nth-of-type(n) 与nth-child(n)类似，匹配的是标签元素
E:nth-last-of-type(n) 匹配父级标签元素下倒数第n个子元素
E:last-child 匹配父元素的最后一个子元素
E:last-of-type 匹配父元素下使用同种标签的最后一个子元素
E:first-of-type 匹配父元素下使用同种标签的第一个子元素
E:only-child E是否是父元素下唯一的子节点
E：only-of-type 是否是唯一的这个标签
n的取值：
2n+1 基数 2n是偶数
3n是第三行，3n+1是第一行，3n+2是第二行···
nth-child(even) 偶数行
nth-child(odd) 奇数行
E:empty 找到其中完全为空的元素(空格和换行也不算空，直接添加注释的可以算作空元素）

伪元素

在wrap所在元素内容之前添加aaa

 .wrap::before{
    content:"aaa";
}

在wrap所在元素内容之后添加bbb

 .wrap::after{
    content:"aaa";
}

选择器优先级

1.有!important，权重最大
2.内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义
*同级下面的覆盖上面的

组合选择器

E,F 多元素选择器，同事匹配E和F元素
E F后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
E>F 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F 直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F 普通相邻选择器，匹配E元素之后的同级元素F（无论直接相邻与否）
.class1.class2 匹配class="class1 class2"的元素
element#id 匹配element元素中的id元素

属性选择器

E[attr] 匹配所有具有属性attr的元素
E[attr='a']从选择器中筛选具有这个属性名称，并且属性值为指定值的元素
可以通过自定义属性找到元素
比如：input[miaov="liu"]
选择器[属性名称^="值"]
从选择器中筛选具有这个属性名称，并且属性值以指定值开头的元素
比如：input[miaov^="l"]
选择器[属性名称$="值"]
从选择器中筛选具有这个属性名称，并且属性值以指定值结尾的元素
比如：input[miaov$="l"]
选择器[属性名称="值"]
从选择器中筛选具有这个属性名称，并且属性值包含指定值的元素
比如：input[miaov="l"]
选择器[属性名称|="值"]
从选择器中筛选具有这个属性名称，并且属性值为"指定值-"的元素
比如：input[miaov|="l"]

新增选择器

input::-webkit-input-placeholder {
                color: pink;
            }

效果：

div:first-letter {
    color: red;
    font-size: 2em;
}
div:first-line {
    color: pink;
}

效果：

.wrap h2:first-child { background-color: red; }
选择到class为wrap的所有元素，找到元素下的所有的h2，并且这个h2是它父级下的第一个子节点，选择到这个h2

继承

color
font-size/font-family/font-weight/line-height

不继承

display
margin
padding
border

查看字体

控制台输入escape ('微软雅黑')，把%u换成/

文本

text-align：justify 两端对齐（在自动折行的情况下进行）
text-transform改变文字大小写 none、uppercase、lowercase、capitalize（首字母变大写）
white-space:nowrap; 强制不换行
text-overflow：ellipsis; 多余内容显示为···
em 父元素的倍数
rem body的字体大小的倍数，chrome默认16px
vw宽度为屏幕的1%