10网页前端CSS——CSS选择器

最新推荐文章于 2023-07-10 21:59:06 发布

lemon_wsm

最新推荐文章于 2023-07-10 21:59:06 发布

阅读量228

点赞数

分类专栏：网页前端

本文链接：https://blog.csdn.net/weixin_41167340/article/details/81357223

版权

网页前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1：优先级：

内联式>嵌入式>外联式

当样式冲突时，就是采用就近原则。没有样式冲突时则采用叠加效果。

一：CSS基础语法

1：格式：选择器{声明1，；声明2；声明3......}其中选择器也叫选择符。

2：这里的声明是以 “属性：值”的形式，而且多个声明之间用分号进行分割

3：h1{color:red;font-size:14px}

4:这里的h1就是选择器，当然这里直接用标签当做选择器了，后面的color 属性取值为red，而后面的font-size属性取值为14个像素。其中color：red就可以理解为一个声明。

5：选择器的分组： h1,h2,h3,h4,h5{colo：red} 多个元素加入同一个样式。

6：继承

body{

color：red；}

二：css派生选择器

根据元素在其位置的上下关系来定义样式

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <title>
             选择器
        </title>
        <style type="text/css">
            ul li{
                color: green;
            }
            body{
                font-size: 50px;
            }
            
            p{
                color: green;/*声明*/
       
            }
        </style>
    </head>
    <body> <!--body元素为p的父级元素，p继承了body的所有属性*/-->
        <p style="color: red">
            内联文字效果改变
        </p>
        <ul>
            <i> pai</i>
            <li>
                派生选择器
            </li>
        </ul>
    </body>
</html>

三：css id选择器

1：定义 #id名{样式...}

2：使用：<html 标签 id=“id名” >...</html 标签>

3：注意：id选择符的名字只能在网页中使用一次

4：选择符的优先级：从小到大【id选择符】->【class选择符】->【html选择符】->[html属性]

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <title>
             选择器
        </title>
        <style type="text/css">
       
            #ad{
                color: red;
            }
        </style>
    </head>
    <body> 
    
        <b id="ad">   <!--注意：这里的id为唯一的，必须以字母开头-->
            id选择器
        </b>
    </body>
</html>

四：css 类选择器

class选择符：

1：定义：.类名{样式}

2：使用：<html 标签 class=“类名” >...</html>

.m{color:red} 凡是class属性值为m的都采用此样式。

p.ps{colo：green} 只有p标签中class 属性值为ps的才采用此样式。

注意：类选择符可以在网页中重复使用。

<!DOCTYPE html>
<html>
    <head>
       <meta charset="utf-8">
        <title>
             选择器
        </title>
        <style type="text/css">
            .oll{
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            <ol class="oll">
                <li>
                类选择器
                </li>
            </ol>
              <ol class="oll">
                <li>
                2类选择器
                </li>
            </ol>
        </p>
    </body>
</html>

lemon_wsm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10网页前端CSS——CSS选择器

1：优先级：内联式&gt;嵌入式&gt;外联式当样式冲突时，就是采用就近原则。没有样式冲突时则采用叠加效果。一：CSS基础语法1：格式：选择器{声明1，；声明2；声明3......}其中选择器也叫选择符。2：这里的声明是以 “属性：值”的形式，而且多个声明之间用分号进行分割3：h1{color:red;font-size:14px}4:这里的h1就是选择器，当然这...
复制链接

扫一扫