css媒体查询和css选择器

媒体查询

媒体查询 - 完整写法 - 了解

@media 关键词 媒体类型 and (媒体特性) { css代码 }

关键词和媒体类型可以省略

关键词/逻辑操作符号

• and
• only
• not

设备类型

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值,包括以上三种情形

媒体特性

特殊颜色为最常用的

特性名称	属性	值
视图的宽和高	width、height	数值
视图最大宽或高	max-width、max-height	数值
视图最小宽或高	min-width、min-height	数值
屏幕方向	orientation	portrait：竖屏，landscape：横屏

媒体查询常用写法

@media (媒体特性){
css代码
}

css基本选择器

通配符(*)选择器

*{

}

元素(标签)选择器

h1{

}

类(class)选择器

.className{

}

ID选择器

#idName{

}

css复合选择器

交集选择器

`元素选择器`配合`类选择器`
h1.className{

}

并集选择器

`选择器1`,`选择器2`,`选择器3`,`选择器4`{
  
}

后代选择器

`ul`中的所有后代`li`
ul li{

}

子代选择器

`ul`中的所有子代`li`
ul>li{

}

兄弟选择器

选中div后紧紧相邻的兄弟p元素(睡在我下铺的兄弟) - 相邻兄弟选择器
div+p{

}
选中div后所有的兄弟p元素(睡在我下铺的所有兄弟) - 通用兄弟选择器
div~p{

}

属性选择器

选中具有title属性的元素
[title]{
  具有title属性的标签
}

选中具有title属性且值为'title'属性的元素
[title='title']{

}

伪类选择器

表示一个类,但不是类,是元素特殊状态的描述

动态伪类

/* 超链接独有的两种状态link和visited */
没有访问过的a元素
a:link{

}

访问过的a元素
a:visited{

}

选中的鼠标悬浮状态的元素
span:hover

选中激活的元素
span:active

/* 表单独有的状态focus */
选中有焦点的元素
input:focus

结构伪类

选中div第一个儿子p元素(按照所有兄弟计算)

div>p:first-child{

}
选中div最后一个儿子p元素(按照所有兄弟计算)

div>p:last-child{

}

选中div第n个儿子p元素(按照所有兄弟计算)

div>p:nth-child(3){

}

选中div第n个儿子p元素(按照所有兄弟计算),可以写公式

div>p:nth-child(n+1){

}

选中div第一个儿子p元素(按照所有同类型兄弟计算)

div>p:first-of-type{

}

选中div最后一个儿子p元素(按照所有同类型兄弟计算)

div>p:last-of-type{

}

选中div第n个儿子p元素(按照所有同类型兄弟计算),可以写公式

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

}

否定伪类

选中的是div的儿子p元素,但是排除类名为fail的元素

div>p:not(.fail){

}

UI伪类

选中的是勾选的复选框或单选按钮

input:checked{

}

选中的是被禁用的input元素

input:disabled{

}

选中的是被可用的input元素

input:enabled{

}

目标伪类

选中锚点指向的元素

div:target{

}

语言伪类

div:lang(en){

}

伪元素选择器

选中元素中的第一个文字
::first-letter{
  
}
选中元素中的第一行文字
::first-line{
  
}
选中被鼠标选中的内容
::selection{
  
}
选中输入框的提示文字
::placeholder{
  
}
在元素最开始的位置,创建一个子元素(必须用content属性指定内容)
::before{
  
}
在元素最后的位置,创建一个子元素(必须用content属性指定内容)
::after{
  
}