CSS的基本选择器和扩展选择器

最新推荐文章于 2023-03-31 18:20:03 发布

团子ing

最新推荐文章于 2023-03-31 18:20:03 发布

阅读量526

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yeyinglingfeng/article/details/47293303

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS与html的4种结合方式

(1)每个html标签上的属性style

示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
    </head>
    <body>
        <div style="background-color:blue;color:green;">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

style=”background-color:blue;color:green;
将字体的背景色设置为蓝色，字体颜色设置为绿色

(2)在head标签中添加style标签

示例

<html>
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style type="text/css">
            div{
                background-color: blue;
                color: green;
            }
        </style>
    </head>
    <body>
        <div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

通过该语句,为之后的div标签设置属性，字体背景为蓝色，字体颜色为绿色

<style type="text/css">
    div{
        background-color: blue;
        color: green;
    }
</style>

如果把示例中body中的div标签改为p标签，则可以将head标签中的style标签作如下修改即可实现让网页中显示的字体颜色和背景颜色改变

<style type="text/css">
    p{
        background-color: blue;
        color: green;
    }
</style>

实际上这种方法就是将原本每个标签中的style属性都拿到了head中的style标签中。

(3)使用@import url(css文件的路径)

示例

<html>
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style type="text/css">
            @import url(1.css);
        </style>
    </head>
    <body>
        <div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

和该html文件在同一文件夹中的1.css文件

div{
    background-color: blue;
    color: red;
}

可以从第一段代码中看到，@import url(…)方法需要放在head标签的style标签下才能起作用。当然，就像方法2中讲的那样，也可以将div标签改为p标签，效果是一样的
有一点需要注意的是：该方法不是很常用，因为在一些浏览器中，该方法完全不起作用。所以不建议使用该方法

(4)link头标签，引入外部css文件

示例

<html>
    <head>              
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <link rel="stylesheet" type="text/css" href="1.css"/>
    </head>
    <body>
        <div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

如上所示，使用link标签的方法格式(css文件的位置和内容都和方法3中相同)

<link rel="stylesheet" type="text/css" href="css文件路径"/>

因为方法3会被一些浏览器无视掉，而完全不起作用，所以使用link标签就成为了一种普遍的现象，该方法能够在所有浏览器中执行。

(5)四种方法的优先级：由上到下，由外到内，优先级由低到高，简单来说，就是离的越近，优先级越高

2.基本选择器

总共三种

（1）标签选择器

解释：使用标签名作为选择器的名称
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style>
            div{
                background-color: gray;
                color: blue;
            }
            p{
                background-color: green;
                color: red;
            }
        </style>
    </head>
    <body>
        <div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
        <p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>
    </body>
</html>

（2）class选择器

解释：每个html标签都有一个class属性
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style>
            div.a{
                background-color: gray;
                color: blue;
            }
            p.a{
                background-color: green;
                color: red;
            }
            div.b{
                background-color: gray;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="a">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
        <p class="a">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>
        <div class="b">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

当有几个不同的标签的class属性一样，且想要表现的效果也一样时，在style中可以省略标签名，直接用 .class名即可

（3）id选择器

解释：每个html标签都有一个id属性
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style>
            div#a{
                background-color: gray;
                color: blue;
            }
            p#a{
                background-color: green;
                color: red;
            }
            div#b{
                background-color: gray;
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="a">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
        <p id="a">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>
        <div id="b">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
    </body>
</html>

当有几个不同的标签的id属性一样，且想要表现的效果也一样时，在style中可以省略标签名，直接用 #id名即可

（4）基本选择器优先级

style属性 > id选择器 > class选择器 > 标签选择器

3.扩展选择器

常用的有3种

（1）关联选择器

解释：多个不同标签嵌套时
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style>
            div p{
                background-color: gray;
                color: blue;
            }
            p{
                background-color: green;
                color: red;
            }
        </style>
    </head>
    <body>
        <div><p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p></div>
        <p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>
    </body>
</html>

页面效果为第一行(即div p)颜色为背景灰色，字体蓝色；
第二行(即p)颜色为背景绿色，字体红色。
使用方法和格式

<!--head->style标签中-->
div p{
        background-color: gray;
        color: blue;
}
<!--body中-->
<div><p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p></div>

（2）组合选择器

解释：为不同的标签选择同一样式
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style>
            div,p{
                background-color: gray;
                color: blue;
            }
        </style>
    </head>
    <body>
        <div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
        <p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>
    </body>
</html>

使用方法和格式

<!--head->style标签中,注意逗号-->
div,p{
        background-color: gray;
        color: blue;
}
<!--body中-->
<div>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</div>
<p>世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</p>

（3）伪元素选择器

解释：使用css提供的定义好的样式
示例

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>
            hello world
        </title>
        <style style="text/css">
            /*初始状态*/
            a:link {
                background-color: blue;
            }
            /*悬停状态*/
            a:hover {
                background-color: green;
            }
            /*点击状态*/
            a:active {
                background-color: red;
            }
            /*点击之后的状态*/
            a:visited {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <a href="3-1.html" target="_blank">世界上没有奇迹，有的只是必然和偶然，还有谁做了什么</a>
    </body>
</html>