通配符选择器
通配符选择器可代表给所有的标签添加样式
*{
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;
}
