CSS选择器与标签的分类

Bub_ble___

已于 2023-04-10 09:44:34 修改

阅读量280

点赞数

分类专栏： HTML 文章标签： css 前端 html

于 2023-03-31 13:50:01 首次发布

本文链接：https://blog.csdn.net/Bub_ble___/article/details/129874791

版权

HTML 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的选择器类型，包括交集选择器、并集选择器、后代选择器和子代选择器，以及伪类选择器的应用，如链接伪类的LVhao顺序。此外，还讨论了标签的显示模式，如块状元素、行内元素和行内块元素的特性，并介绍了如何转换它们的显示模式。最后，文章涵盖了CSS背景属性，如背景颜色、图片、平铺、位置和附着。

摘要由CSDN通过智能技术生成

一、复合选择器

1.交集选择器

由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如 h3.special 意思是类名为.special的h3标签。

2.并集选择器（CSS选择器分组）

是各个选择器（包括标签选择器、class类选择器id选择器等）通过逗号连接而成的。

比如： .one, p, #test{color: #F00;} 表示.one和p和#test这三个选择器都会执行颜色为红色。

3.后代选择器（包含选择器）

用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

<head>
    <title>Document</title>
    <style>
        footer span{
            color: aqua;
        }
    </style>
</head>
<body>
    <footer>
        <div>
            <p>
                <span>111111</span>
            </p>
        </div>
    </footer>
</body>

4.子代选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。

白话：这里的子，指的是亲儿子，不包含孙子、重孙子之类。

<head>
    <title>Document</title>
    <style>
        footer>div>p>span{
            color: aqua;
        }
    </style>
</head>
<body>
    <footer>
        <div>
            <p>
                <span>111111</span>
            </p>
        </div>
    </footer>
</body>

二、伪类选择器

1.与类选择器区别

类选择器是一个点，比如: .demo{}而我们的伪类用2个点就是冒号。比如:link{}

2.链接伪类选择器

:link /* 未访问的链接 */ /*普通标签不生效*/

:visited /* 已访问的链接 */ /*普通标签不生效*/

:hover /* 鼠标移入时 */

:active /* 鼠标单击时 */

如果<a>标签四个伪类的书写顺序不正确，会导致链接的四种状态显示效果错乱。正确顺序：a:link、a:visited、a:hover、a:active（记忆：LVhao）

3.清除无序列表的小点

{ list-style:none; }

清除后前面还有空格，用下面内容清除

padding: 0;

margin: 0;

}

4.清除a的下划线

{ text-decoration:none;}

5.宽高属性

注意要加单位px

{
width:200px;
height:200px;
}

三、标签显示模式

1.块状元素

常见的块元素有 h1-h6 / p / div / ul / li / ol / dl / dd / dt / table / tr / caption / form 等。

块级元素的特点：

1、有默认的宽高，宽是父元素的100%，高度是内容所撑起来的高度

2、宽高可以设置

3、独占一行

4、可以容纳任意的元素（ h / p 元素不能容纳块状元素）

5、可以设置外边距和内边距的。

2.行内元素（内联元素）

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等。

行内元素的特点：

1、有默认的宽高，宽高是内容所撑起来的

2、宽高设置是无用的

3、相邻的行内元素或者行内块元素在同一行上显示

4、只可以容纳行内元素与内容

5、水平方向上的外边距和内边距可以设置，垂直方向设置无用

注意：1.链接里面不能再放链接 2. a里面可以放块级元素

3.行内块元素

常见：<img />、<input />、<label>、<select>、<option>

行内块元素的特点：

1、有默认的宽高，是元素本身的宽高

2、宽高是可以设置的

3、相邻的行内元素或者行内块元素在同一行上显示

4、一般不容纳其他元素

5、外边距和内边距都是可以设置的

4.标签显示模式转换

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

四、CSS 背景(background)

background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（复合属性）
background:背景颜色背景图片地址背景平铺背景滚动背景位置