css选择器

css选择器

*-通用选择器-选择所有元素

<type>-元素选择器-选择指定类型的元素

#<id>-id选择器-选择指定id属性的元素

.<class>-class选择器-选择指定class属性的元素

[attr]-系列属性选择器-选择指定attr属性的元素

s1,s2,s3...-分组选择器-选择多个选择器的元素

s1 s2-后代选择器-选择指定选择器的后代元素

s1>s2-子选择器-选择指定选择器的子元素

s1+s2-相邻兄弟选择器-选择指定选择器相邻的元素

s1~s2-普通兄弟选择器-选择指定选择器后面的元素

::first-line -伪元素选择器-选择块级元素文本的首行

::first-letter -伪元素选择器-选择块级元素文本的首字母

::before-伪元素选择器-选择元素之前插入内容

::after-伪元素选择器-选择元素之后插入内容

:root-跟元素选择器-选择文档中的根元素

:first-child -子元素选择器-选择元素中第一个子元素

:last-child -子元素选择器-选择元素中最后一个子元素

:only-child -子元素选择器-选择元素中唯一子元素

:only-of-type -子元素选择器-选择指定类型的唯一子元素

:nth-child(n) -子元素选择器-选择N个子元素

:enabled-UI选择器-选择启用状态的元素

:disabled-UI选择器-选择禁用状态的元素

:checked-UI选择器-选择被选中input勾选元素

:default-UI选择器-选择默认元素

:valid-UI选择器-验证有效选择input元素

:invalid-UI选择器-验证无效选择input元素

:required-UI选择器-有required属性选择元素

:optional-UI选择器-无required属性选择元素

:link-动态选择器-未访问的超链接元素

:visited-动态选择器-已访问的超链接元素

:hover-动态选择器-悬停在超链接上的元素

:active-动态选择器-激活超链接上的元素

:foucs-动态选择器-获取焦点的元素

:not-其他选择器-否定选择的使用

:empty-其他选择器-选择没有任何内容的元素

:lang-其他选择器-选取包含lang属性元素

target-其他选择器-选取URL片段标识指向元素

*{

background-color: red;

}

/* type类型的 */

[type="password"]{

background-color: green;

}

/* 属性 */

[href]{

background-color: pink;

}

/* 属性=""的元素 ^以什么开头*/

a[href^=http]{

background-color: red;

}

/* 以$结尾 */

a[href$=pdf]{

background-color: yellow;

}

a[class="links"]{

background-color: aqua;

}

/* 并集选择器,元素的集合,中间用逗号分开 */

ul,span,.links{

background-color: red;

}

/* 后代选择器，描述的越详细等级越高 */

ul li span{

background-color: red;

}

li span{

background-color: green;

}

ul>li:first-child {

border: 1px saddlebrown dashed;

}

ul>li:last-child {

border: 1px red dashed;

}

ul>li>span:only-child{

border: 1px green dashed;

}

/* 选择只有一个指定类型的子元素的那个子元素。不实用 */

ul>li>div>p:only-of-type{

background-color: red;

}

/* 最好用 */

ul>li:nth-child(6){

background-color: gold;

}

ul>li:nth-last-child(3){

background-color: pink;

}

div>p:nth-last-of-type(2){

background-color: pink;

}

div>p:nth-of-type(2){

background-color: green;

}

input:enabled { border: 1px solid red; }

input:disabled {background-color: red;}

input:checked {border: 1px solid red;}

input:default {display: none;}

input:valid { border: 1px solid blue; }

input:invalid { border: 1px solid green; }

input:required { border: 1px solid blue; }

input:optional { border: 1px solid green; }

/* :link鼠标未单击访问的时候超链接的样式 */

a:link {

-color: red;

}

/* :hover鼠标划过的时候超链接的样式 */

a:hover {

-color: yellow;

}

/* :active 鼠标单击访问时 */

a:active {

-color: green;

}

/* :visited 单击访问过后的样式 */

a:visited {

-color: #00FFFF;

}

/* 获取焦点的样式 */

input:focus {

background-color: red;

}

/* 选择属性不等于什么的元素 */

a:not([href*="baidu"]) {

color: deeppink;

}

div{

width: 200px;

height: 200px;

border: 1px dashed saddlebrown;

}

div:empty{

background-color: rgba(255,0,0,0.5);

}

移动端

<meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

相对单位em的特性em的值并不是固定的em会继承父级元素的字体大小（相对父级的字体大小而发生变化）

rem单位

相对单位rem的特性

rem的值并不是固定的

rem是相对根节点html发生变化的（和父节点无关）

实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算 -->

使用场景：

em

通常不使用 em 单位控制字体大小

首行缩进: text-indent:2em;

rem

一切可扩展都应该使用 rem 单位

响应式网站可以使用rem去做适配

不要使用 ：em 或 rem：

多列布局

当元素应该是严格不可缩放的时候

fieldset内容划分 legend标题