HTML培训No.3 css选择器

bioioid_song

已于 2022-07-17 17:52:56 修改

阅读量311

点赞数

文章标签： html css css3

于 2022-02-06 16:35:26 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/122799139

版权

知识学习

id和class选择器

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。

#para1{
	text-align:center;
	color:red;
}

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."表示：

.center{text-align:center;}
所有拥有center类的HTML元素均为居中

也可以指定特定的HTML元素使用class。
在以下实例中，所有的p元素使用class = "center"让该元素的文本居中。

p.center{text-align:center}

如何插入样式表

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用<style>元素来包含CSS
外部引用 - 使用外部 CSS 文件

内联样式表

使用<style>标签在文档头部定义内部样式表。

<head>
<style>
hr{color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}

内联样式

由于要将表现得内容混杂在一起，内联样式会损失掉样式表得许多优势。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同得样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3
{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3
{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么h3得到的样式是

color:red;
text-align:right;
font-size:20pt;

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页得头元素中，或在一个外部的css文件中。甚至可以在同一个HTML文件内部引用多个外部样式表。
一版情况下，优先级如下**(内联样式) inline style > (内部样式) Internal style sheel > (外部样式) External style sheet > 浏览器默认样式 **
注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

基础选择器

 /*通用选择器*/
        * {
            color:brown;
        }
        /*元素选择器*/
        div {
            font-size: 30px; 
        }
        /*id选择器*/
        #p1{
            background-color:pink;
            color:green;
            /*因为id选择器优先级高，使得通用选择器里面设置的字体颜色发生了改变*/
        }
        /*类选择器*/
        .cls1{
            font-family:楷体;
        }
        /*分组选择器*/
        #p1,.cls1,font{
            text-decoration:line-through;
        }

 <div class="cls1">这是一个div1</div>
    <div>这是一个div2</div>
    <p id="p1">这是一个p</p>
    <span>这是一个span</span>
    <br>
    <font>这是一个font</font>

在这里插入图片描述

css组合选择器

css样式的优先级，是根据选择器的精确度/权重来决定的，常见的权重如下，权重越大，优先级越高

元素选择器：1
类选择器：10
id选择器：100
内联样式：1000
在CSS中包含了四种组合方式：后代选择器(以空格分割)，子元素选择器(以大于号分割)，相邻兄弟选择器(以加号分隔)，普通兄弟选择器(以波浪线分割)。

后代选择器(派生选择器)

选择指定元素的所有指定后代元素，以空格隔开

选择器1 指定元素{
	属性名:属性值;
	......
}

子代选择器

选择指定元素的第一代子元素，以大于号>隔开

相邻兄弟选择器

选择指定元素的下一个指定元素(得相邻，中间不可有其他的元素)，两者有相同的父元素，以 + 隔开。

/*后代选择器*/
        .food li{
            border:green solid 1px;
            
        }
        /*子代选择器*/
        .food2 > li{
            border:blue dotted 1px; 
        }
        /*相邻兄弟选择器*/
        #mydiv + div{
            border:blue solid 2px;
        }

<ul class="food">
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
    <hr>

    <ul class="food2">
        <!--只作用于水果这一个li，里面的香蕉，苹果，梨都没有受影响-->
        <li>水果
            <ul>
                <li>香蕉</li>
                <li>苹果</li>
                <li>梨</li>
            </ul>
        </li>
        <li>蔬菜
            <ul>
                <li>白菜</li>
                <li>油菜</li>
                <li>卷心菜</li>
            </ul>
        </li>
    </ul>
    <hr>
    <div>相邻兄弟选择器</div>
    <div id = "mydiv">相邻兄弟选择器</div>
    <!--若此行加上<p>Test</p>，不仅<p>标签内内容不会发生变化，后面的那个<div>内容也不会发生变化
    因为<p>标签的出现，使得div之间不再相连-->
    <div>相邻兄弟选择器</div>
    <div>相邻兄弟选择器</div>