首页 > 其他分享 >CSS选择器之基础选择器和复合选择器

CSS选择器之基础选择器和复合选择器

时间:2023-03-29 15:34:11浏览次数:40  
标签:伪类 color 元素 复合 实例 red 选择器 CSS

本博文介绍CSS中的基础选择器和复合选择器。

基础选择器包括标签选择器、类选择器、id选择器和通配符选择器,复合选择器包括后代选择器、子选择器、并集选择器和伪类选择器。 

1 基础选择器

基础选择器由单个选择器组成,包括:标签选择器、类选择器、id选择器和通配符选择器。

1.1 标签选择器

标签选择器通过单个元素标签(如p、div、h1)选择对应的元素,使用标签选择器会选择到所有的对应标签。

使用格式:

标签名{
    属性1: 属性值1;
    属性2: 属性值2;
}

使用实例:

div{
    height: 100px;
    width: 100px;
}

实例作用:将所有的 div 元素的高(height)和宽(width)设置为100px

1.2 类选择器

类选择器通过元素的类名(class)对元素进行选择,可以选择到一个或者多个元素标签,该选择器在开发中最常用。

使用格式:

.类名{
    属性1: 属性值1;
    属性2: 属性值2;    
}

使用实例:

.red-box{
    color: red;
}

实例作用:将类名为"red-box"的元素中的字体颜色(color)设置为红色(red)

1.3 id选择器

id 选择器通过元素的 id 对元素进行选择,该选择器只能选择到一个元素标签(因为元素的 id 是唯一的),id 选择器经常和 js 搭配使用。

使用格式:

#id值{
    属性1: 属性值1;
    属性2: 属性值2;
}

使用实例:

#content_left{
    text-align: left;
}

实例作用:将 id 为"content_left"的元素中的文字内容设置左对齐(text-align: left;)

1.4 通配符选择器

通配符选择器可以选择页面中的所有元素,在去除掉页面中的默认样式时有很好的作用。

使用格式:

*{
    属性1: 属性值1;
    属性2: 属性值2;
}

使用实例:

*{
    margin: 0;
    padding: 0;
}

实例作用:将页面中所有元素的外边距(margin)和内边距(padding)都设置为0(此实例使用频率很高)

2 复合选择器

复合选择器由多个基础选择器组成,常用的包括:后代选择器、子选择器、并集选择器和伪类选择器。

2.1 后代选择器

后代选择器可以选择某个元素的所有后代元素(包括儿子元素、孙子元素等)。

使用格式:

元素1 元素2 元素3{
    样式
}

注意:

(1)元素和元素之间用空格隔开;

(2)元素1、元素2、元素3...为基础选择器(标签选择器、类选择器、id选择器等)。

使用实例:

div p{
    color: red;
}

实例作用:将所有 div 元素的所有子元素 p 中的字体颜色(color)设置为红色(red)

2.2 子选择器

子选择器可以选择某个元素的最近一级子元素(只包括儿子元素,不包括孙子元素等)。

使用格式:

元素1 > 元素2{
    样式
}

注意:

(1)元素和元素之间用 > 隔开;

(2)元素1、元素2...为基础选择器(标签选择器、类选择器、id选择器等)。

使用实例:

div > p{
    color: red;
}

实例作用:将所有 div 元素的所有儿子元素 p 中的字体颜色(color)设置为红色(red)

2.3 并集选择器

并集选择器可以选择多组元素并设置相同的样式。

使用格式:

元素1, 元素2{
    样式
}

注意:

(1)元素和元素之间用 , 隔开;

(2)元素1、元素2...为基础选择器(标签选择器、类选择器、id选择器等)。

使用实例:

.left-box, .right-box{
    color: red;
}

实例作用:将所有类名为"left-box"和"right-box"的元素中的字体颜色(color)设置为红色(red)

2.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,这里介绍链接伪类选择器和 focus伪类选择器。

使用格式:在选择器后用冒号表示,如 :hover、:active等。

  • 链接伪类选择器

        链接伪类选择器通过将元素选择器(a 元素)和伪类选择器复合,起到不同的效果,具体可以分为以下四种。

链接伪类选择器 选择元素
a:link 选择到所有未被访问的 a 元素
a:visited 选择到所有已被访问的 a 元素
a:hover 选择到鼠标指针位于其上的 a 元素
a:active 选择活动链接(鼠标按下未弹起的 a 元素)

        注意:为了确保链接伪类选择器生效,需按照link、visited、hover、active的顺序来写。

        使用实例:

a:hover{
    color: red;
}

        实例作用:当鼠标移到 a 元素上时,链接的文字颜色(color)变为红色(red)

  • focus伪类选择器(:focus)

        focus伪类选择器可以选取获得焦点(光标)的表单元素。

        使用格式:

input:focus{
    样式
}

        使用实例:

input:focus{
    background-color: skyblue;
}

        实例作用:当光标聚焦在 input 元素上时,input 元素的背景颜色(background-color)变为天蓝色(skyblue)

标签:伪类,color,元素,复合,实例,red,选择器,CSS
From: https://www.cnblogs.com/detailNew/p/17269109.html

相关文章