css选择器
CSS选择器:就是指定CSS要作用的标签,那个标签的名称就是选择器。意为:选择哪个容器。
CSS的选择器分为两大类:基本选择题和扩展选择器。
基本选择器:
标签选择器:针对一类标签
ID选择器:针对某一个特定的标签使用
类选择器:针对你想要的所有标签使用
通用选择器(通配符):针对所有的标签都适用
- .class:类选择器,如下例子,选择所有class="first_list"的元素
#first_list {
width: 100px;
height: 100px;
border: 1px solid skyblue;
background-color: hotpink;
}
<div id="first_list"></div>
<div id="first_list"></div>
- #first_list: id选择器,和类选择器同样的用法,不同的是选择器名字前面是号**#**
#first_list {
width: 100px;
height: 100px;
border: 1px solid skyblue;
background-color: hotpink;
}
<div id="first_list"></div>
<div id="first_list"></div>
- div,p: 选择所有div和p元素(这个选择器的写法只是其中一种方式,也可用其他选择器中间加逗号的方式,来进行dom选择)比如:
.first,.second {
width: 100px;
height: 100px;
background-color: blue;
}
<div class="first">12</div>
<div class="second">34</div>
- div p: 子选择器 选择div元素内部的所有p元素。
div p{
color:blue;
}
- 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 = v a l u e ] : ∗ ∗ 属 性 值 选 择 器 d i v [ c l a s s =value]:** 属性值选择器 div[class =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元素
: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 匹配不合法时的样式