CSS选择器大全

通配符选择器

通配符选择器可代表给所有的标签添加样式

　　*{

　　margin:0px;

　　Padding:0px;

　　}

class选择器

适合class属性值的选择器

　　.classSelector{

　　background-color:cyan;

　　}

 

id选择器

适合id属性值的选择器

　　#idSelector{

　　background-color:red;

　　}

 

标签选择器

单一的标签选择器

　　span{

　　background-color:gold;

　　display:block;

　　}

 

组合选择器, 群组选择器

mark标签和h5标签同时添加样式

　　mark，h5{

　　font-style:italic;

　　}

 

后代选择器, 派生选择器

所有ul的a标签子元素添加样式

　　ul a{

　　text-decoration:none;

　　}

 

子元素选择器

span标签下的子元素mark标签添加样式，不可越级

　　span > mark{

　　color:blue;

　　}

 

相邻兄弟选择器

同级别中，h1标签之后的第一个p标签添加样式

　　h1 + p{

　　backgr-color:cyan;

　　}

 

同级元素通用选择器

同级别中，h1标签下的所有p标签都添加样式

　　h2 - p{

　　background-color:purple;

　　}

 

属性选择器

带有title属性的img标签添加样式

　　img[title]{

　　border-radius:30px;

　　}

 

带有title属性，并且值为image的img标签添加样式

　　img[title="image"]{

　　border-radius:50px;

　　}

 

带有title属性，值包含’img’子串的img标签添加样式

　　img[title*="image"]{

　　border:2px solid red;

　　}

 

带有title属性，并且值是以’ge’结尾的img标签添加样式

　　img[title$="ge"]{

　　transform:rotate(30deg);

　　}

 

未被访问的链接添加样式

　　a:link{

　　font-size:50px;

　　background-color:white;

　　}

 

正在被访问的链接添加样式

　　a:active{

　　background-color:red;

　　}

 

鼠标略过链接添加样式

　　a:hover{

　　background-color:gold;

　　font-size:55px;

　　}

 

被访问过的a标签添加样式

　　a:visited{

　　background-color:gold;

　　}

 

当input标签获取焦点的时候添加样式

　　input:focus{

　　background-color:cyan;

　　}

 

给p标签的第一个字符添加样式

　　p:first-letter{

　　font-size:30px;

　　color:blue;

　　}

 

给p标签中的文字第一行添加样式

　　p:first-line{

　　background-color:gray;

　　}

 

在article元素前面添加样式

　　article:after{

　　content:"~~~";

　　background-color:red;

　　}

在article元素后面添加样式

　　article:before{

　　content:".";

　　background-color:blue;

　　}

 

同一父级中，给h1标签后面的ul标签添加样式

　　h1 - ul{

　　background-color:red;

　　}

 

当有很多p标签的情况下，第一个p标签添加样式

　　p:first-of-type{

　　background-color:red;

　　}

 

当有很多p标签的情况下，最后一个p标签添加样式

　　p:last-of-type{

　　background-color:blue;

　　}

 

在一个父级元素中，只有一个p标签的情况下，添加样式

　　p:only-of-type{

　　color:white;

　　}

 

同一父级中，给第2个div添加样式

　　div:nth-child(2){

　　color:white;

　　}

 

同一父级中，所有奇数div标签添加样式

　　div:nth-child(odd){

　　color:black;

　　}

 

同一父级中，所有偶数元素添加样式

　　div:nth-child(even){

　　color:black;

　　}

 

同一父级中，第1,4,7,10,13…个元素添加样式

　　div:nth-child(3n+1){

　　color:red;

　　}

 

同一父级中，第2,5,8,11,14…个元素添加样式

　　div:nth-child(3n+2){

　　color:red;

　　}

 

同上，只不过是从下往上数

　　div:nth-last-child(3){

　　color:white;

　　}

 

同一父级中，给第2个mark标签样式

　　mark:nth-of-type(2){

　　display:block;

　　}

 

同一父级中，给倒数第2个mark标签样式

　　mark:nth-last-of-type(2){

　　display:block;

　　}

 

同一父级中，给第一个元素添加样式

　　p:first-child{

　　background-color:green;

　　}

 

同一父级中，给最后一个元素添加样式

　　p:last-child{

　　background-color:green;

　　}

 

给文档的根元素添加样式，也就是html标签

　　:root{

　　padding:0px;

　　margin:0px;

　　}

 

给没有子元素且没有内容的div添加样式

　　div:empty{

　　width:100px;

　　height:100px;

　　background-color:black;

　　box-shadow:10px 10px 10px gray;

　　}

 

给目标元素添加样式

　　:target{

　　font-size:1.2em;

　　background-color:snow;

　　}

 

给每个可用input标签添加样式

　　input{

　　background-color:red;

　　}

 

给每个不可用的input标签添加样式

　　input:enabled{

　　background-color:red;

　　}

 

给当前被选中的input元素添加样式

　　input:disabled{

　　background-color:red;

　　}

 

给除了span以外的标签添加样式

　　input:checked{

　　box-shadow:5px 5px 5px gray;

　　}

 

给被选中的部分添加样式

　　:not(span){

　　display:block;

　　}

 

只能向 ::selection 选择器应用少量 CSS

　　::selector{

　　color:red;

　　font-size:1.5em;

　　}

 

文章来源: blog.csdn.net，作者：yechaoa，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/yechaoa/article/details/54615213