CSS选择器篇
.class : 类选择器 .className{} //选择类名为className的元素
css代码:
.className{
width:300px;
height:200px; brackground-color:red;
}
html代码:
<div class="className"></div>
#id : id选择器 #idName{} //选择id名为idName的元素
#idName{
color:red;
}
* : 选择所有 *{} //通配符
*{
margin:0;
padding:0;
}
element : 元素选择器 div{} //选择所有的div元素
element,element : 多个元素选择器 div,p{} //选择所有的div和p元素
p:{
font-size:24px;
}
element,element : 多个元素选择器 div,p{} //选择所有的div和p元素
div,p{
background:red;
}
element element : 子选择器 div p{} //选择div中所有的子元素p
div p{
color:blue;
}
element>element : 拥有某父元素的元素 div>p{} //选择所有父元素为div的p元素
element+element : 相邻选择器 div+p{} //选择所有div后紧挨的p元素
div>p{
font-size:29px;
}
element+element : 相邻选择器 div+p{} //选择所有div后紧挨的p元素
div+p{
color:red;
}
element~element : 之后选择器 div~p{} //选择所有div后的p元素
div~p{
color:red;
}
[attribute] : 属性选择器 [width]{} //选择所有拥有width属性的元素
[width]{
height:100px;
}
[attribute=value] : 属性值选择器 [class="a"] //选择所有拥有class属性且名为a的元素
[class=a]{
background-color:red;
}
[attribute~=value] : 属性值选择器 [class="a"] //选择所有拥有class属性且名 包含 为a的元素
[class~=a]{
color:red;
}
[attribute|=value] : 属性值选择器 [class="a"] //选择所有拥有class属性 且名起始以a开头 的元素
[class|=a]{
clolr:red;
}
element[attribute^=value]: 属性值选择器 div[class="a"] //选择所有拥有class属性 且名以a开头 的div元素
div[class="a"]{ color:red;}
element[attribute$=value]: 属性值选择器 div[class$="a"] //选择所有拥有class属性 且名以a结尾 的div元素
img[src$=".jpg"]{
width:200px;
}
element[attribute*=value]: 属性值选择器 div[class*="a"] //选择所有拥有class属性 且名包含a 的div元素
div[class*="a"]{ padding:10px 10px;}
伪类:
:link 正常情况未被访问的样式 a:link{} //未被访问的超链接a的样式
a:link{
text-decoration:none;
}
:visited 已经被访问了的样式 a:visited{} //已经访问的样式
:active 当被鼠标点击那一刻时的样式 a:active{} //当超链接被鼠标点击那一刻时的样式
:hover 当鼠标移上去的样式 div:hover{} //当鼠标移在这个层上时的样式
:focus 选择获取焦点的元素 input:focus{}//选择获取焦点的输入框
:before 在该元素前添加的内容样式 p:before{} //在所有的p元素前添加的内容及内容样式
:after 在该元素后添加内容及样式 p:after{} //选择所有的p元素在其后添加内容及样式
:first-letter 选择该元素的第一个字母 p:first-letter{} //选择所有p元素的第一个字母
:first-line 选择该元素的第一行 p:first-line{} //选择所有p元素的第一行
:first-child 该元素为其父元素的第一个子元素 p:first-child{} //指定p元素为其父元素的第一个子级
:first-of-type 该元素的父元素的第一个该元素 p:first-of-type{} //选择作为父元素的第一个p元素
:last-of-type 该元素的父元素的最后一个该元素 p:first-of-type{} //指定其父元素的最一个p元素
:last-child 该元素为其父元素的最后一个子元素 p:last-child{} //选择其父元素最后一个子元素为p元素
:last-child 该元素为其父元素的最后一个子元素 p:last-child{} //选择其父元素最后一个子元素为p元素
:nth-child(n) 该元素其父元素的第n个该子元素 p:nth-child(2){} //选择其父元素正数的第2个p元素
:nth-of-type(n) 该元素其父元素的的第n个子元素
:root 根元素
:emmpty 没有子元素的元素
:target 当前活动的#news元素(包含锚名)
:enabled 当前启用的元素
:disabled 当前禁用的元素
:checked 每个选中的元素
:not 除该元素外的元素
::selection 匹配元素中被用户选中或处于高亮状态下的部分
:out-of-range 匹配值在指定值域外时的样式
:in-range 匹配值在值域内时的样式
:require 匹配设置了require的元素
:optional 匹配可选的元素
:valid 匹配合法时的样式
:invalid 匹配不合法时的样式