前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)

Posted 2022-10-02 suwanbin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端-CSS-初探-注释-语法结构-引入方式-选择器-选择器优先级-01(待完善)相关的知识，希望对你有一定的参考价值。

CSS（Cascading Style Sheet）
CSS注释
CSS语法结构
CSS的三种引入方式
选择器
- 伪类、伪元素选择器速查
CSS选择器优先级*****

本篇博客绝大多数内容来源网上，感谢作者的无私分享~

CSS（Cascading Style Sheet）

用来调节标签样式的，又称层叠样式表

CSS注释

/* 单行注释 */

/* 
多行注释
*/


经典写法
/* 这是购物车页面的样式表（一般放css文件的第一行，声明该文件是干啥的） */


/* 顶部导航条开始 */
    ...顶部导航条样式代码...
/* 顶部导航条结束 */

CSS语法结构

选择器 
    属性1: 值;
    属性2: 值;
    属性3: 值;


#content 
    background-color: red;

CSS的三种引入方式

文件导入式（项目规范推荐使用）
在head标签中的style标签里书写
嵌入式/行内式（标签上直接写，最不推荐使用）

1.文件导入式（最规范的形式）
<link rel="stylesheet" href="mycss.css"/>

2.head标签内 写style 标签
<style>
    p
        color: red
    
</style>

3.嵌入式
<p style="color: red">加油，努力</p>

选择器

这一块儿内容可参考 CSS Selectors（可选择中文），切换左侧目录查看，可以完全不看下面的内容

我们通过选择器来选择，指定标签，给标签添加样式

基本选择器

标签选择器、类选择器、id选择器、全局选择器、兄弟选择器、后代选择器
属性选择器
组合选择器
伪元素选择器
伪类选择器

选择器可嵌套（#d1 .c2 a:hover... 给id为d2下的class为c2的a标签的hover状态设置属性）

/* ######### 标签选择器 ########## */
元素（标签）选择器(<p></p>)
p
    color: red;


/* ######### 类选择器 ########## */
类选择器(class="c1")
.c1
    color: red;


/* ######### id选择器 ########## */
id选择器（id="d1"）
#d1
    color: red;


/* ######### * 全局选择器 ########## */
* 全局选择器(直接改所有的 ，用的不多)
*
    color: red;


/* ######### 后代选择器 ########## */
（空格）后代选择器(div下面的span、div下的p的span)
div span
    color: red;

/* ######### 子代选择器 ########## */
子代选择器(div下面的span)
div>span
    color: red;


/* ######### 毗邻选择器 ########## */
毗邻选择器（紧挨着的，下面额）
div+span
    color: red;

/* ######### 弟弟选择器 ########## */
弟弟选择器（同级别的下面所有的标签）
div~span
    color: red;



/* ######### 属性选择器 ########## */
属性选择器
    具有某个属性名
    某个属性名及属性值
    具有某个属性名及属性值某个标签

/*[hobby]找只要包含某个属性名的标签*/
[hobby]
    background-color: red;


[hobby="jdb"]
    color="jdb";


/*找具有属性名是hobby 并且值是 jdb的 input标签*/
input[hobby="jdb"]
    color: red;


/* ######### 选择器分组 ########## */
选择器分组
p, span
    color: red;

最规范的写法：
p,
span
    color: red;


/* ######### 选择器嵌套 ########## */
选择器嵌套(所有选择器都可以嵌套（案例：id选择器、class选择器、标签选择器）)
#d1 .c1 span
    color: red;



/* ######### 伪类选择器 ########## */
伪类选择器（可以再了解一下）
:link 未访问时  :hover 鼠标覆盖/悬浮  :active 鼠标按下  :visited 访问后  :focus 获取焦点
a:hover
    color: red;


/* ######### 伪元素选择器 ########## */
伪元素选择器
:first-letter第一个字（母）  :before（最前面）  :after（最后面）  :first-child（第一个元素）
p:first-letter
    color: red;

p:before
    content: '^';  /*css加上去的，页面上无法选中*/
    color: red;

p:after  /*可以用来解决浮动问题*/
    content: '&';  /*在末尾添加内容*/
    color: red;