css · 2019-07-19 0

CSS选择器总结

1.元素选择器、id选择器、类选择器

/* css代码 */
/* 元素选择器 */
p {
    color: red;
}
/* id选择器 */
#id1 {
    color: yellow;
}
/* 类选择器 */
.class1 {
    color: brown;
}

2.选择器分组(并集选择器)、复合选择器(交集选择器)

并集选择器 使用“,”隔开。

交集选择器 第一个必须为标签选择器,第二个为类选择器或id选择器,中间不能有空格。

/* 选择器分组 id为id1或者class为class1的元素 */
#id1,.class1   {
    color: red;
}
/* 复合选择器 span元素并且class为class1的元素 */
span.class1{
    background-color: yellow;
}

3.后代元素选择器、子元素选择器、兄弟选择器

  • 父元素:直接包含子元素的元素;
  • 子元素:直接被父元素包含的元素;
  • 祖先元素:直接或间接包含后代元素的元素;后代元素:直接或间接被祖先元素包含的元素。
/* 后代元素选择器 选择div标签后代元素为span的元素 */
div span{
    color: red;
}
/* 子元素选择器 选择div标签子元素为span的元素 */
div > span{
    color: yellow;
}
/* 兄弟选择器 选择在span元素后第一个p元素 */
span + p {
    color: red;
}
/* 兄弟选择器 选择在span元素后所有p元素 */
span ~ p {
    color: red;
}

4.属性选择器

/* 属性选择器 p元素包含title属性的元素 */
p[title]{
    background-color: yellow;
}
/* 属性选择器 p元素包含title属性值为hello的元素 */
p[title="hello"]{
    background-color: yellow;
}
/* 属性选择器 p元素包含title属性包含独立的单词hello的元素 */
    p[title~="hello"]{
    background-color: yellow;
}
/* 属性选择器 p元素包含title属性前几个字母是he的元素 */
    p[title^="he"]{
    background-color: yellow;
}
/* 属性选择器 p元素包含title属性后几个字母是llo的元素 */
    p[title$="llo"]{
    background-color: yellow;
}
/* 属性选择器 p元素包含title属性包含字母是ll的元素 */
    p[title*="ll"]{
    background-color: yellow;
}

5.伪类和伪元素选择器

伪类选择器:相当于在元素上添加类选择器,使用:表示

伪元素选择器:相当于添加新的元素,使用::表示

/* 
* 伪类选择器
* :link 表示没访问过的链接
* :visited 表示访问过的链接,由于涉及到用户的隐私问题,智能设置字体的颜色
* :hover 表示鼠标移入的状态
* :active 超链接被激活的状态
*/
a:link{
    color: yellowgreen;
}
a:visited{
    color: red;
}
a:hover{
    color: skyblue;
}
a:active{
    color: black;
}  

/* p元素是父元素的第一个元素 */
p:first-child{
    color: red;
}

/* p元素其父元素的最后一个元素 */
p:last-child{
    color: red;
}

/* p元素其父元素的唯一子元素 */
p:only-child{
    color: red;
}

/* p元素其父元素的第二个子元素 */
p:nth-child(2){
    color: red;
}

/* p元素其父元素的倒数第二个子元素 */
p:nth-last-child(2){
    color: red;
}

/* p元素其父元素的第一个元素p元素 */
p:first-of-type{
    color: red;
}

/* p元素其父元素的最后一个p元素 */
p:last-of-type{
    color: red;
}

/* p元素其父元素的唯一p元素 */
p:only-of-type{
    color: red;
}

/* p元素其父元素的第二个p元素 */
p:nth-of-type(2){
    color: red;
}

/* p元素其父元素的倒数第二个p元素 */
p:nth-last-of-type(2){
    color: red;
}

/*
* 伪元素选择器
* 相当于p标签的第一个字母用标签包着
*/
p::first-letter{
    color:blue;
}

/*
* 选择p内容第一行
*/
p::first-line{
    color: red;
}

p::before{
    content: "before内容";
}

/*
* 相当于p标签的最后添加一个新标签
*/
p::after{
    content: "after内容";
}

6.选择器优先级

内联样式 > id选择器 > 类选择器 > 元素选择器

!import表示该样式优先级最高


p{
    background-color: gray !important;
}