CSS语法基础

Komorebi⁼

已于 2024-10-11 17:46:54 修改

阅读量473

点赞数 6

文章标签：前端 css html html5

于 2024-09-29 21:19:54 首次发布

本文链接：https://blog.csdn.net/2302_81659011/article/details/142638784

版权

一、基本选择器

1、标签选择器

用标签称作为选择器，为对应标签名的元素设置样式。

格式如下：

<head>

    <style>
        h1{
            color:red
        }
 </style>
  
</head>
<body>
    <h1 class="book_name" id="jinyong1">《书剑恩仇录》</h1>
    <ul>
        <li>第一章</li>
        <li> 第二章</li>
         <li>第三章</li>
    </ul>
</body>

运行结果如下：

2、类选择器

用class名作为选择器，为制定class名的元素设置样式

格式如下：

<head>

    <style>
        .book_name{
            color:blue
        }
 </style>
  
</head>
<body>
    <h1 class="book_name" id="jinyong1">《书剑恩仇录》</h1>
    <ul>
        <li>第一章</li>
        <li> 第二章</li>
         <li>第三章</li>
    </ul>
</body>

运行结果如下：

3、id选择器

用id名作为选择器，为指定id名的元素设置样式（id名是唯一的）

格式如下：

<head>

    <style>
        #jinyong1{
            color: green;
        }
 </style>
  
</head>
<body>
    <h1 class="book_name" id="jinyong1">《书剑恩仇录》</h1>
    <ul>
        <li>第一章</li>
        <li> 第二章</li>
         <li>第三章</li>
    </ul>
</body>

运行结果如下：

4、样式的优先级

行内样式>id选择器样式>标签选择器样式>类选择器样式（无需遵循“后来居上”原则）

二、选择器的复合

1、交集选择器

两个选择器直连：第一个必须是标签选择器，第二个必须是类选择器或id选择器，且选择器之前不能有空格

格式如下：

<head>

    <style>
         ul.name{
            color: red;
        }  
 </style>
  
</head>
<body>
    <h1 class="book_name" id="jinyong1">《书剑恩仇录》</h1>
    <ul class="name">
        <li>第一章</li>
        <li> 第二章</li>
         <li>第三章</li>
    </ul>
</body>

运行结果如下：

2、并集选择器

多个选择器写在一起（逗号隔开），使用同样的样式声明

格式如下：

<head>

    <style>
         h1#wuchengen{
            color: green;
        }

 </style>
  
</head>
<body>
    <h1 class="book_name" id="wuchengen">《西游记》</h1>
    <ul class="name">
        <li>第一章</li>
        <li> 第二章</li>
         <li>第三章</li>
    </ul>
</body>

运行结果如下：

3、关系选择器

（1）后代选择器

选择所有被A元素包含的B元素，中间用空格隔开

代码如下：

<head>

    <style>
          ul li ul #first_section{
            color: blue;
        }

 </style>
  
</head>
<body>
    <ul>
        <h1 class="book_name" id="wuchengen">《西游记》</h1>
        <li>
            第一章
            <ul>
            <li>
                <h4 id="first_section">第一节</h4>
            </li>
            <li>
                <h4 id="second_section">第二节</h4>
            </li>
        </ul>
        </li>
    
</body>

运行结果如下：

（2）子代选择器

选择所有作为A元素的直接子元素B，对更深一层的元素不起作用，用>隔开

代码如下：

<head>

    <style>
          li>#second_section{
            color: red;
        }

 </style>
  
</head>
<body>
    <ul>
        <h1 class="book_name" id="wuchengen">《西游记》</h1>
        <li>
            第一章
            <ul>
            <li>
                <h4 id="first_section">第一节</h4>
            </li>
            <li>
                <h4 id="second_section">第二节</h4>
            </li>
        </ul>
        </li>
    
</body>

运行结果如下：

（3）相邻兄弟选择器

选择器跟A元素后的B元素，用+隔开，选择相邻的第一个兄弟元素，只能向下选择

代码如下：

<head>

    <style>
          h1+li{
            color: green;
        }
 </style>
  
</head>
<body>
    <ul>
        <h1 class="book_name" id="wuchengen">《西游记》</h1>
        <li>
            第一章
            <ul>
            <li>
                <h4 id="first_section">第一节</h4>
            </li>
            <li>
                <h4 id="second_section">第二节</h4>
            </li>
        </ul>
        </li>
    
</body>

运行结果如下：

（4）通用兄弟选择器

选择A元素之后的所有兄弟元素B，作用于多个元素，用~隔开，只能向下选择

代码如下：

<head>

    <style>
           h1~li{
            color: rgb(255, 153, 0);
        }
 </style>
  
</head>
<body>
    <ul>
        <h1 class="book_name" id="wuchengen">《西游记》</h1>
        <li>
            第一章
            <ul>
            <li>
                <h4 id="first_section">第一节</h4>
            </li>
            <li>
                <h4 id="second_section">第二节</h4>
            </li>
        </ul>
        </li>
    
</body>

运行结果如下：