css选择器

最新推荐文章于 2024-07-11 18:05:14 发布

zl吉姆餐厅

最新推荐文章于 2024-07-11 18:05:14 发布

阅读量123

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_32631105/article/details/107039526

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS简介

css引入

内联样式

<body>
    <h1 style="color: red">css</h1>
</body>

内部样式

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            color: red
        }
    </style>
</head>

<body>
    <!-- <h1 style="color: red">css</h1> -->
    <h1>css</h1>
</body>

引入外部样式

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            color: red
        }
    </style>
    <link rel="stylesheet" href="demo.css"/>
</head>

<body>
    <!-- <h1 style="color: red">css</h1> -->
    <h1>css</h1>
</body>

h1{
    color: blue
}

导入外部样式

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <style>
        h1{
            color: red
        }
    </style> -->
    <!-- <link rel="stylesheet" href="demo.css"/> -->
    <style>
        @import 'demo.css'
    </style>
</head>

<body>
    <!-- <h1 style="color: red">css</h1> -->
    <h1>css</h1>
</body>

基本语法

一个基本结构
选择器{样式名：样式值}
三个注意事项
分号分割
小写
逗号分隔

特性

层叠性

h1 {
            color: antiquewhite;//不生效
            text-align: center;
            background: red;
            color: aqua;//不生效
            color: green;
        }

继承性

    <style>
        p {
            color:red;
        }
    </style>
</head>
<body>
    <p>
        Join us any evening for refreshing elixirs,
        conversation and maybe a game or two of Dance Dance Revolution.
       <span> Wireless access is always provided;  
        BYOWS (Bring your own web server).</span>
     </p>
</body>

选择器

通配符选择器

* {property:value}

对页面中的所有元素生效

元素选择器

E {property:value}

使用某个元素名作为选择器，例如p。

<head>
    <style>
        p{
            color: green
        }
    </style>
</head>
<body>
    <p class="title">元素选择器</h2>
</body>

id选择器

#id {property:value}

一个HTML文档中，只有一个唯一的ID

<head>
    <style>
        #title {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="title">id选择器</h1>
</body>

类选择器

.class{property:value}

class不具有唯一性，具有相同class的元素都会被选中

<head>
    <style>
        .title {
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="title">id选择器</h1>
    <h2 class="title">类选择器</h2>
</body>

类选择器可以去元素选择器结合使用，精确选中某个元素

<head>
        .title {
            color: red;
        }
        p.title{
            color: green
        }
    </style>
</head>
<body>
    <h1 class="title">id选择器</h1>
    <p class="title">类选择器</h2>
</body>

属性选择器
选择具有某种属性的元素

E[attribute]{property:value}

写法	含义
[attribute]	选取指定属性的元素
[attribute=value]	选取指定属性和指定属性值的元素
[attribute~=value]	选取指定属性值中包含指定值的元素
[attribute\|=value]	选取以指定值开头的元素

<head>
    <style>
        p[title="a"] {
            color: red;
        }
    </style>
</head>
<body>
    <p title="a">属性选择器</p>
</body>

伪类选择器
伪类以冒号开头

伪类	含义
:link	为被访问的链接
:visited	已被访问的链接
:hover	鼠标经过链接上方的状态
:active	链接被激活的状态

按顺序书写！！！

<head>
    <style>
        a:link {
            color: red;
        }
        a:visited {
            color: blue;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: pink;
        }
    </style>
</head>
<body>
   <a href="https://www.baidu.com" >百度</a>
</body>

派生选择器

后代选择器

父元素 子元素{property:value}

选择某个父亲元素的后代元素

<head>
    <style>
        span {
            color: blue;
        }
        p span{
            color: red;
        }
    </style>
</head>
<body>
   <div>云<span>开发</span></div>
   <p>微<span>服</span><span>服务</span></p>
</body>

选择p元素子元素中所有的span元素，即“微”“服务”

子元素选择器

父元素 >子元素 {property:value}

<head>
    <style>
        span {
            color: blue;
        }

        p > span {
            color: red;
        }
    </style>
</head>

<body>
    <div>云<span>开发</span></div>
    <p>微
        <span>服务
            <span>孙子span</span>
        </span>
    </p>
</body>

在这里插入图片描述
第一个选择器将所有的span元素设置为红颜色，即：“开发”、“服务”，“孙子span”
第二个选择器将p元素的第一级子元素设为红色，即：“服务”。

区别：后代选择器选择所有子元素，而子元素选择器只选择第一级子元素。

相邻兄弟选择器

父元素 + 子元素 {property:value}

选择紧跟在一个元素后的兄弟元素。
兄弟元素一定是同级元素。

<head>
    <style>
        span {
            color: blue;
        }

        p > span {
            color: red;
        }
        span + span {
            color: green;
        }
    </style>
</head>

<body>
    <div>云<span>开发</span></div>
    <p>微
        <span>服务
            <span>孙子span</span>
        </span>
        <span>同级元素</span>
    </p>
</body>