CSS选择器篇（所有选择器）

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元素

p:{
   font-size:24px;
}

element,element ：多个元素选择器 div,p{} //选择所有的div和p元素

div,p{
   background:red;
}

element element : 子选择器 div p{} //选择div中所有的子元素p

div p{
  color:blue;
}

扫描二维码关注公众号，回复： 2170455 查看本文章

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元素

：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 匹配不合法时的样式

CSS选择器篇（所有选择器 ）

CSS选择器篇

伪类：

猜你喜欢

CSS选择器篇（所有选择器）