CSS2_基础学习

一、css基础知识

优先级规则：行内样式>内部样式=外部样式

• 行内样式

<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>

• 内部样式

<style>
  h1{
    color:red;
    font-size:40px;
    }
</style>

• 外部样式
  1.新建一个扩展名为.css的样式文件，把所有CSS代码都放入此文件中。
  2.在html文件中引入.css文件。

<link rel="stylesheet" href="./xxx.css">

css语法：选择器+声明块

二、css选择器

2.0 选择器的优先级

行内样式>ID选择器>类选择器>元素选择器>通配选择器

2.1 CSS基本选择器

• 通配选择器

*{ 属性名:属性值; }

• 元素选择器

标签名{ 属性名:属性值;}

• 类选择器

.类名{ 属性名:属性值;}

• ID选择器

#id值{ 属性名:属性值;}

2.2 复合选择器

2.2.1. 交集选择器

语法：选择器1选择器2选择器3…选择器n{}

2.2.2. 并集选择器

语法：选择器1,选择器2, 选择器3,…选择器n{}

2.2.3. 后代选择器（加空格）

语法：选择器1 选择器2 选择器3…选择器n{}

2.2.4. 子代选择器

语法：选择器1>选择器2>选择器3>…选择器n{}

2.2.5. 兄弟选择器

• 相邻兄弟选择器：（+）
  作用：选中指定元素后，符合条件的相邻兄弟元素。（简记：睡在我下铺的兄弟。）
  语法：选择器1+选择器2{}
• 通用兄弟选择器：（~）
  作用：选中指定元素后，符合条件的所有兄弟元素。（简记：睡在我下铺的所有兄弟）
  语法：选择器1~选择器2{}

2.2.6. 属性选择器

作用：选中属性值符合一定要求的元素。语法：
1 [属性名] 选中具有某个属性的元素。
2 [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。
3 [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。
4 [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
5 [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

2.2.7. 伪类选择器

• 动态伪类：
  :link——超链接未被访问的状态。
  :visited——超链接访问过的状态。
  :hover——鼠标悬停在元素上的状态。
  :active——元素激活的状态。
  :focus——获取焦点的元素。（表单输入框类使用）
• 结构伪类：
  :first-child——所有兄弟元素中的第一个。
  :last-child——所有兄弟元素中的最后一个。
  :nth-child(an+b)——所有兄弟元素中的第an+b个。
  :first-of-type——所有同类型兄弟元素中的第一个。
  :last-of-type——所有同类型兄弟元素中的最后一个。
  :nth-of-type(an+b)——所有同类型兄弟元素中的第an+b个。
• 否定伪类：
  :not(选择器)——排除满足括号中条件的元素。
• UI伪类：
  :checked——被选中的复选框或单选按钮。
  :enable——可用的表单元素。
  :disabled——不可用的表单元素
• 目标伪类：
  :target——选中锚点指向的元素。
• 语言伪类:
  :lang()——根据指定的语言选择元素

2.2.8. 伪元素选择器

::first-letter——选中元素中的第一个文字
::first-line——选中元素中的第一行文字
::selection——选中被鼠标选中的内容
::placeholder——选中输入框的提示文字
::before——在元素最开始的位置，创建一个子元素(必须用content属性指定内容）
::after——在元素最后的位置，创建一个子元素(必须用content属性指定内容）

<style>
        /* 什么是伪元素？ —— 很像元素，但不是元素（element），是元素中的一些特殊位置 */

        /* 选中的是div中的第一个文字 */
        div::first-letter {
            color: red;
            font-size: 40px;
        }
        /* 选中的是div中的第一行文字 */
        div::first-line {
            background-color: yellow;
        }
        /* 选中的是div中被鼠标选择的文字 */
        div::selection {
            background-color: green;
            color: orange;
        }
        /* 选中的是input元素中的提示文字 */
        input::placeholder {
            color: skyblue;
        }
        /* 选中的是p元素最开始的位置，随后创建一个子元素 */
        p::before {
            content:"￥";
        }
        /* 选中的是p元素最后的位置，随后创建一个子元素 */
        p::after {
            content:".00"
        }
    </style>