CSS选择器，CSS特性，CSS显示模式和部分属性-CSDN博客

<style>
    ol a{color: crimson;}
    ul a{color: blueviolet;}
</style>
<body>
    <ol style="color: aqua;">
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href=“#”>我是孙子</a></li>
    </ol>
    <ul >
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li><a href="#">不会变化</a></li>
  </body>

Css部分

ol a{color: crimson;}：ol作为父元素，a作为子元素，设置了在<ol>（有序列表）元素内部的<a>（超链接）元素的文本颜色为深红色（crimson）。

ul a{color: blueviolet;}：将父元素<ul> 的子元素<li> 的子元素<a>的文本颜色设置为蓝紫色（blueviolet）。

HTML 部分

<ol style="color: aqua;">：创建一个有序列表，并通过style属性将列表的文本颜色设置为水蓝色（aqua）。

子选择器

元素1>元素2 {样式声明}

父元素 ➡ 子元素

子元素必须是父元素的直系亲儿子，子元素内的子元素不归父元素管

Eg:

<style>
    ol>li>a{color: crimson;}
    ul>li>.b{color: blueviolet;}
</style>
<body>

    <ol style="color: blue;">
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href=“#”>我是孙子</a></li>
    </ol>
    <ul style="color: chartreuse;">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li class="b"><a href="#">不会变化</a></li>
</body>

CSS 部分

ol>li>a{color: crimson;}：设置了在<ol>元素的直接子元素<li>的直接子元素<a>元素的文本颜色为深红色（crimson）。

ul>li>.b{color: blueviolet;}：将<ul>元素的直接子元素<li>里面的类名为.b的元素的文本颜色设置为蓝紫色（blueviolet）。

HTML 部分

<ol style="color: blue;">：通过style属性将列表的文本颜色设置为蓝色（blue）。

<li>我是 ol 的孩子</li>：三个普通的列表项，是有序列表的子元素。

<ul style="color: chartreuse;">：创建一个无序列表，将列表的文本颜色设置为黄绿色

<li>我是 ul 的孩子</li>：三个普通的列表项，是无序列表的子元素。

<li class="b"><a href="#">不会变化</a></li>：这个列表项有一个类名b，其中包含一个超链接。根据 CSS 规则，类名为b的元素的文本颜色应为蓝紫色，但超链接的文本颜色不会改变，因为<a>标签本身没有被 CSS 规则直接选中，且这里没有继承关系

并集选择器

元素1，元素2 {样式声明}

选择元素1和元素2，

用于集体声明，

兄弟选择器

元素 1~元素 2{

property1:value1;

property2:value2;

property3:value3;

……}

兄弟选择器是第一个元素之后，所有的元素 2 都会被选择，且这些元素和第一个元素拥有同一个父元素，两个元素之间不一定要相邻

伪类选择器

伪类选择器用冒号（:）表示，比如 :hover 、 :first-child 。

元素选择符和冒号之间不能有空格，伪类名之间也不能有空格。

:active 向被激活的元素添加样式

:focus 向拥有输入焦点的元素添加样式

:hover 向鼠标悬停在上方的元素添加样式

:link 向未被访问的链接添加样式

:visited 向已被访问的链接添加样式

:first-child 向元素添加样式，该元素是它的父元素的读一个子元素

:lang 向带有指定的 lang 属性的元素添加样式

Eg：

给链接添加特殊效果

<body>
    <a href="#" target="_blank">百度</a>
    <a href="#" target="_blank">搜狐</a>
    <a href="#" target="_blank">360</a>

    <style>
        a:active{color: aqua;}
        a:hover {font-size: 20px;}
        a:focus {color: blueviolet;}
    </style>

如图，为搜狐链接添加鼠标悬停，文字变大效果

Css的显示模式

元素显示模式

块元素

常见的块元素：<div> 、<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

块元素具有以下特点：

独占一行

块元素在页面布局中会独占一行，前后都会自动换行。例如，`<div>`、`<p>`、`<h1>`等块元素标签，当它们依次出现在 HTML 文档中时，每个元素都会在新的一行上显示，不会与其他块元素在同一行并排出现。这使得块元素在构建页面结构时能够清晰地划分不同的区域和模块。

可设置宽度和高度：块元素可以通过 CSS（层叠样式表）设置明确的宽度和高度。
可设置边距和填充：块元素可以设置外边距（margin）、内边距（padding）属性。
可容纳其他块元素和内联元素
在标准的 HTML 结构中，为了保持良好的代码规范和可维护性，文字类元素不能存放块级元素

行内元素

常见的行内元素（也称内联元素）：<span> 、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、

行内元素的特点：

与其他文本内容或行内元素在同一行显示
不能设置宽度和高度，大小由其中的内容决定
默认宽度是它本身内容的宽度
只容纳其他行内元素或文本
链接里面不能再放链接特殊情况链接里面可以放块级元素，转换成块级模式最安全

行内块元素

常见块元素：<img />、<input />、<td>

行内块元素的特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
一行可以显示多个（行内元素特点）。
默认宽度就是它本身内容的宽度（行内元素特点）。
高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式的转换

转换为块元素：display:block;

转换为行内元素：display:inline;

转换为行内块：display: inline-block;

Eg:

这段代码通过 CSS 样式的设置，改变了<div>和<span>元素的默认显示特性，展示了如何将块级元素转换为行内显示以及将行内元素转换为行内块元素，display:inline-block将其显示方式设置为行内块元素，结合了行内元素和块级元素的特点，可以设置宽度和高度，同时又可以与其他行内元素在同一行显示。从而实现更加灵活的页面布局。同时，通过设置不同的背景颜色和尺寸，使得页面中的元素易于区分和观察其显示效果

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
    <style>
        div{background-color: pink; width: 200px;height: 50px;}
        .cai{background-color: darkmagenta;
            width: 150px;height: 25px;
            margin-right: 5px;
        display: inline;}
        span{background-color: aqua;
        display:inline-block ;
        width: 200px;height: 25px;}
    </style>
</head>
<body>
    <div>
        <a href="#" target="_blank">金星阿姨</a>
    </div>
    <div>
        <a href="#" target="_blank">金星阿姨</a>
    </div>
    <div class="cai">
        我是块级元素
    </div>
    <div class="cai">
        我是块级元素
    </div>
    &nbsp;
    <span>
        行内元素转化为行内块元素
    </span><br>
    <span>
        行内元素转化为行内块元素
    </span>

单行文字垂直居中

文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中。

Css背景属性

背景颜色

background-color

元素背景颜色默认值是 transparent（透明）

背景图片

background-image:

默认值是none（无图片）, 路径不要加引号

background-image: url(../文件夹/文件名及格式);

背景平铺

background-repeat ：repeat | no-repeat | repeap-x | repeat-y

repeat 背景图像在纵向和横向上平铺

no-repeat 背景图像不平铺

repeat-x 横向上平铺

repeat-y 纵向上平铺

背景图片位置

样式名称：

background-position: x y;

x 和 y 是坐标，可以使用

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

背景图片固定

background-attachment

参数 scroll滚动

Fixed 固定

background-attachment 后期可以制作视差滚动的效果。

背景样式

background: 背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

背景色半透明

Background :rgba (0 ，0，0，0.3 )

• 最后一个参数是 alpha 透明度，取值范围在 0~1 之间

• 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

注意：

• 背景半透明是指盒子背景半透明，盒子里面的内容不受影响

• CSS3 新增属性，是 IE9+ 版本浏览器才支持的，但是现在实际开发,我们不太关注

兼容性写法了,可以放心使用

css特性

层叠行

当选择器所给属性冲突时，会以离结构近的属性值为准

 .c1{
      width: 20px;height: 20px;
      order: 5px solid black;
      background-color: blue;
    }
 .c1{
       background-color: crimson; 
      }