给自己记录一下，加深一下印象，免得老是忘
css选择器
.class//类选择器
#id//id选择器
*//选择所有元素
p//选择所有p元素
div,p//选择所有div和p元素
div p//选择p标签里的p元素
div>P//选择所有div标签里面的p元素
div+p//选择所有紧跟在div标签后的第一个p元素
[attitude]
示例：[target]//选择所有具有target属性的元素
[attribute=value]
示例：[target=-blank]//选择所有target属性为“-blank”的元素
[attribute~=value]
示例：[title~=flower]//选择标题属性包含flower的元素
:link
示例：a:link//选择所有未访问过的链接
：visited//选择所有已访问过的链接
：active//选择活动链接
：hover//当鼠标悬停在元素上
：focus
input:focus//选择所有具有焦点的元素
p:first-letter//选择所有p元素的第一个字母
p:first-line//选择所有p元素的第一行
p:first-child//选择所有以p元素为父元素的第一个子元素
p:before//在p元素之前插入内容
p:after//在p元素之后插入内容
p~ul//选择p元素之后的每一个ul元素
a[src^="https"]//选择每一个src属性以https开头的a元素
a[src$=".pdf"]//选择每一个src属性的值以".pdf"结尾的元素
a[src*="runoob"]//选择每一个src属性的值包含子字符串"runoob"的元素
p:first-of-type//选择每个p元素是其父级的第一个p元素
p:last-of-type//选择每个p元素是其父级的最后一个p元素
p:only-of-type//选择其父级唯一一个p元素
p:only-child//选择每个p元素是其父级唯一的子元素
p:nth-child(2)//选择每个p元素是其父级的第二个子元素
p:nth-of-type(2)//选择每个p元素是其父级的第二个p元素
:not(p)//选择每个不为p元素的元素
::selection//匹配元素中被用户选中或高亮部分的元素
input:checked//选择每个选中的输入元素
input:disabled//选择每个被禁用的元素
input:enabled//选择每一个已启用的输入元素
:root//选择文档的根元素
p:empty//选择没有子元素的p元素
:required//用于匹配设置了 "required" 属性的元素
:valid//用于匹配输入值为合法的元素
:invalid//用于匹配输入值为非法的元素
:optional//用于匹配可选的输入元素优先级
!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符
伪类和伪元素
3. 伪类和伪元素选择器
3.1. 标记状态的伪类
-
:link 选取未访问过的超链接
-
:visited 选取访问过的连接
-
:hover 选取鼠标悬浮的元素
-
:active 选取点中的元素
-
:focus 选取获取焦点的元素
3.2. 筛选功能的伪类
-
:empty 选取没有子元素的元素
-
:checked 选取勾选状态下的input 元素 只对 radio 和checkbox 有效
-
:disabled 选取禁用的表单元素
-
:first-child 选取当前选择器下的第一个元素
-
:last-child 选取当前选择器下的最后一个元素
-
:nth-child(an+b) 选取指定位置的元素,参数支持an+b的形势.比如 li:nth(2n+1),就可以选取li元素序号是2的整数倍+1的所有元素,也就是1,3,5,7,9序号的li元素
-
:nth-last-child(an+b) 和上面类似,不过从后面选取.
-
:only-child 选取元素唯一的子元素,如果元素的父元素只有它一个子元素就会生效,如果还有其他的兄弟元素,则不生效
-
:only-of-type 选取唯一的某个元素类型。如果元素的父元素只有它一个当前类型的子元素就会生效。
3.3. 伪元素选择器
伪元素选择器是用来香元素设置某种特殊效果.伪元素选择器并不是真实的DOM元素,所以称之伪元素.常用的如下:
-
::first-line 为元素的第一行使用样式
-
::first-letter 为某个元素的首字母或第一个文字使用样式
-
::before 在某个元素之前插入内容
-
::after 在某个元素之后插入内容
-
::selection 对光标选中的元素添加样式
1.伪元素构造的元素是虚拟的,所以不能使用js去操作
2.first-line和first-letter不使用于内联样式,在内联样式中都会失效
3.如果同时使用了 befor 和first-letter. 第一个内容要从before中算起,如果before 中第一个为非文本内容,那first-letter也会作用到这个非文本内容上,但不会生效。
4.在CSS3 中规定, 伪类用一个冒号 (:) 表示, 伪元素用两个冒号 (::)来表示