CSS样式+选择器

最新推荐文章于 2024-08-08 18:52:32 发布

永不被定义

最新推荐文章于 2024-08-08 18:52:32 发布

阅读量1.2k

点赞数 2

文章标签： css3 前端 html

本文链接：https://blog.csdn.net/weixin_51526948/article/details/125209730

版权

CSS的三种样式

1.行内样式

        在标签元素内直接添加style属性来实现对元素样式的设计。

        例如下面标红的字体

        <h1 style="font: size 20px;color: blue;">行内CSS样式</h1>

2.内部样式

        在<head></head>标签元素中直接添加style样式来实现对标签元素h1样式的设计

        <head>

                <style type="text/css">

                        h1{color: rgb(5, 252, 252); }

                </style>

        </head>

3.外部样式

外部样式是通过调用css文件的形式对标签元素进行样式设计，调用css文件时需要用到 link标签，然后附带上type属性。

<link rel="stylesheet" href="com.css" type="text/css">例如这里调用的是名为 com的css文件来对样式进行设计，其中type属性的值要等于text/css。

代码演示如下

<!--html代码段-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>
    <link rel="shortcut icon" href="D:/huashan/qianduan/img/wang.jpg" type="image/x-icon"/>
    <link rel="icon" href="you.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="com.css" type="text/css">
    <style type="text/css">
        h1{
            color: rgb(5, 252, 252);
        }
    </style>
</head>
<body>
    <!-- 优先级：行内>内部样式>外部样式 -->
    <h1>外部CSS样式</h1>
    <p>外部CSS样式</p>
    <h1>内部CSS样式</h1>
    <h1 style="font: size 20px;color: blue;">行内CSS样式</h1>
</body>
</html>


<!--css代码段-->

h1{
    
    color: red;
}
p{
    color: blue;
    font: size 20px;;
}

运行效果如下

CSS选择器

类选择器

通过class属性来定义类选择器，在标签元素中添加class属性，再通过css样式来设计标签，

例如在p标签中定义一个名为red的class属性<p class="red">类选择器</p>，然后在css文件中对类标签进行设计，在class属性名的前面需要加“.”。

.red{

color: red;

font-size: small;

}

ID选择器

通过id属性来的定义id选择器，在标签元素中添加id属性，再通过css样式来设计标签，例如在p标签中定义一个名为first的id属性<P id="first">ID选择器</P>，然后在css文件中对类标签进行设计，在id属性名的前面需要加“#”。

#first{

font-size: large;

color: coral;

}

代码演示如下

<!-- html代码 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="class02.css" type="text/css">
</head>
<body>
    <!-- 类选择器 -->
    <p class="red">类选择器</p>
    <!-- ID选择器 -->
    <P id="first">ID选择器</P>
</body>
</html>

<!-- css文件 -->
.red{
    color: red;
    font-size: small;
}
#first{
    font-size: large;
    color: coral;
}

运行效果如下

层次选择器
后代选择器

有两个选择符A和B，且B被包含在A中例如：在body中的所有p标签

body p{

background-color: aqua;

}

为body下面的所有p标签添加背景颜色

子选择器

有两个选择符A和B，且B是A的子类，例如：ul下的li标签

ul>li{

background-color: chartreuse;

}

为ul下的li标签添加背景颜色

相邻兄弟选择器

在具有class属性的p标签后存在一个p标签，在css文件中通过类选择器名+p即可实现对该标签后的相邻的同级p标签进项操作。

例如：

.action + p{

background-color: beige;

}

在class属性等于action的p标签中，对同级且位于该标签下面的相邻p标签添加背景颜色

通用兄弟选择器

在具有class属性的p标签后存在若干个p标签，在css文件中通过类选择器名~p即可实现对该标签后的相邻的同级p标签进项操作。

例如：

.action~p{

background-color: cornflowerblue;

}

在class属性等于action的p标签中，对同级且位于该标签下面的所有p标签添加背景颜色

结构伪类选择器

first-child:

选择父级元素下第一个子元素，如果该元素是要定义的标签类型则生效否则不生效。

例如：

p:first-of-type{

background: blue;

}

选择父级元素下的第一个元素如果该元素是p则生效，否则不会有改变

nth-child(n) :

选择父级元素下第n个子元素，同理如果该元素是要定义的标签类型则生效否则不生效。

例如：

p:nth-child(3){

background: black;

}

选择父级元素下的第三个元素如果该元素是p则生效，否则不会有改变

last-child:

选择父级元素下最后一个子元素，同理如果该元素是要定义的标签类型则生效否则不生效。

例如：

ul li:last-child{

background: aqua;

}

选择父级元素ul下的最后一个li元素如果该元素是li则生效，否则不会有改变

first-of-type:

选择body下所有后代元素下的第一个p元素(相对于其他p元素来说)，如果有其他元素阻碍也会直接跳过其他元素。

例如：

p:first-of-type{

background: blue;

}

选择body下所有后代元素中的第一个p元素，如果p元素不在第一位也会跳过其他元素选择第一个出现的p元素

nth-of-type(n):

选择body下所有后代元素下的第n个p元素(相对于其他p元素来说)，如果有其他元素阻碍也会直接跳过其他元素。

例如：

p:first-of-type{

background: blue;

}

选择body下所有后代元素中的第n个p元素，如果p元素不是第n位也会跳过其他元素选择第n个出现的p元素

last-of-type:

选择body下所有后代元素下的最后一个p元素(相对于其他p元素来说)，如果有其他元素阻碍也会直接跳过其他元素。

例如：

p:first-of-type{

background: blue;

}

选择body下所有后代元素中的最后一个p元素，如果最后一位不是p元素也会选择相对于其他p元素来说处在最后一个的p元素

属性选择器

A[b]:

选择A元素，且A元素具有b属性

例如：

h1[class]{

color: blanchedalmond;

background-color: blanchedalmond;

}

选择h1元素，且具有class属性

A[b=c]:

选择A元素，且A元素具有b属性且b属性的值等于c

例如：

p[class=text]{

color: aqua;

font-size: 10px;

background-color: aqua;

}

选择p元素且class属性的值等于text

A[b^=c]:

选择A元素，且A元素具有b属性，且b属性的值是以c开头的（c可以是字符串）

例如：

p[id^=link]{

color: red;

font-size: 30px;

background-color: red;

}

选择p元素，具有id属性，且id属性的值是以link开头的

A[b$=c]:

选择A元素，且A元素具有b属性，且b属性的值是以c结尾的（c可以是字符串）

例如：

li[class$=age]{

background-color: blue;

font-size: 20px;

}

选择li元素，具有class属性，且class属性的值是以age结尾的

A[b*=c]：

选择A元素，且A元素具有b属性，且b属性的值是以c结尾的（c可以是字符串）

例如：

li[class*=id]{

background-color: lawngreen;

font-size:11px;

}

选择li元素，具有class属性，且class的值里具有id