【前端】CSS3学习笔记（一）——选择器

更新时间:2023-04-03 21:39:45 阅读：评论：0

css

层叠样式表(英文全称：cascading style sheets)是一种用来表现html（标准通用标记语言的一个应用）或xml（标准通用标记语言的一个子集）等文件样式的计算机语言。css不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

课程链接

【狂神说java】css3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

学习笔记——选择器

我的第一个css

h1{    color: blue;}

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title><!--    规范：建议分离css与html--><!--    <style>编写css代码</style>--><!--    语法：--><!--    选择器{--><体检检查哪些项目!--        声明1;--><!--        声明2;--><!--        声明3;--><!--    }--><!--    声明最好以;结尾-->    <link rel="stylesheet" href="css/style.css"></head><body><h1>一级标题</h1><p>css的优势:<p/><p>1、内容和表现分离</p><p>2、网页结构表现统一,可以实现复用</p><p>3、样式十分的丰富</p><p>4、建议使用独立于htm的css文件</p><p>5、利用o，容易被搜索引擎收录!</p></body></html>

导入方式

/*外部样式*/h1{    color: green;}

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title><!--    内部样式-->    <style>        h1{            color: red;        }    </style><!--    外部样式-->    <link rel="stylesheet" href="css/style.css"></head><body><p>优先级 就近原则</p><p>外部样式</p><ul>    <li>链接式（html）</li>    <li>导入式（css2.1）</li></ul><!--行内样式 在标签元素中 编写style属性 编写样式--><h1 style="color: blue">标题</h1></body></html>

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <li>导入式</li>    <style>        @import "css/style.css"; 黄埔军校观后感       /*@import url("css/style.css");*/    </style></head><body><h1>外部样式导入式</h1></body></html>

基本选择器

标签选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        /*标签选择器 会选择所有这个标签的元素*/        h1{            color: red;        }        p{            font-size: 20px;        }    </style></head><body><h1>标签选择器h1</h1><h1>标签选择器h1</h1><p>标签选择器p</p></body></html>

类选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        /*类选择器格式 .class的名称{}*/        /*可以多个标签归类 同一个class 可以复用*/        .class1{            color: red;        }        .class2{            color: blue;        }    </style></head><body><h1 class="class1">类选择器</h1><h1 class="class2">类选择器</h1><h1 class="class3">类选择器</h1><p> class="class1">类选择器</p></body></html>

id选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        /*id选择器 id必须保证全局唯一*/        /*#id名称{}*/        /*不遵循就近原则*/        /*id选择器 > class选择器 > 标签选择器*/        #id1{            color: red;        }        .class1{            color: blue;        }        h1{            color: green;        }    </style></head><body><h1 id="id1">id选择器</h1><h1 class="style1">id选择器</h1><h1>id选择器</h1></body></html>

基本选择器总结

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        p{            font-size: 20px;        }    </style></head><body>    <p>标签选择器 选择一类标签</p>    <p>类选择器 选择所有class属性一致的标签 跨标签</p>    <p>id选择器 全局唯一</p>    <br>    <p>优先级：</p>    <p>不遵循就近原则<p/>    <p>id选择器 > class选择器 > 标签选择器</p></body></html>

层次选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        /*后代选择器*/        /*body p{*/        /*    background: red;*/        /*}*/        /*子选择器*/        /*body > p{*/        /*    background: green;*/        /*}*/        /*相邻兄弟选择器 只有下一个*/        /*.active + p{*/        /*    background: red;*/        /*}*/        /*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/        .active ~ p{            background: blue;        }    </style></head><body><p>p0</p><p class="active">p1</p><p>p2</p><p>p3</p><ul>    <li>上海到婺源;        <p>p4</p>    </li>    <li>        <p>p5</p>    </li>    <li>        <p>p6</p>    </li></ul><p>p2020夏至是几月几日日几点7</p><p>p8</p></body></html>

结构伪类选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title><!--    避免使用class id选择器-->    <style>        /*ul第一个元素*/        ul li:first-child{            background: red;        }        /*ul最后一个元素*/        ul li:last-child{            background: blue;        }        /*选中p1*/        /*定位到父元素 选择当前的第一个元素*/        /*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/        p:nth-child(1){            background: green;        }        /*选择当前p元素的父级元素 选中p元素的第二个 类型*/        p:nth-of-type(2){            backgroun先进典型事迹材料d: yellow;        }        a:hover{            background: red;        }    </style></head><body><!--    <a href="">a</a>--><!--    <h1>h1</h1>-->    <p>p1</p>    <p>p2</p>    <p>p3</p>    <ul>        <li>li1</li>        <li>li2</li>        <li>li3</li>    </ul></body></html>

属性选择器

<!doctype html><html lang="en"><head>    <meta chart="utf-8">    <title>title</title>    <style>        .demo a{            float: left;            display: block;            height: 50px;            width: 50px;            border-radius: 10px;            background: red;            text-decoration: none;            text-align: center;            font:bold 20px/50px arial;            color: gainsboro;            margin-right: 5px;        }        /*属性名 属性名 = 属性值（正则）*/        /*        = 绝对等于        *= 包含这个元素        ^= 以这个开头        $= 以这个结尾        */        /*存在id属性的元素*/        /*a[id]{*/        /*    background: yellow;*/        /*}*/        /*a[id = first]{*/        /*    background: yellow;*/        /*}*/        /*class中有links的元素*/        /* a[class*="links"]{            background: yellow;        } */        /* 选中herf中以http开头的元素 */        a[href^=http]{            background: yellow;        }        a[href$=pdf]{            background: blue;        }    </style></head><body><p class="demo">    <a href="/d/file/titlepic/" class="links item first" id="first">1</a>    <a href="/d/file/titlepic/" class="links item active" target="_blank" title="test">2</a>    <a href="images/none.html" class="links item active">3</a>    <a href="images/none.png" class="links item">4</a>    <a href="none.jpg" class="links item">5</a>    <a href="none.pdf" class="links item">6</a>    <a href="none.docx" class="links item">7</a>    <a href="none.pptx" class="links item">8</a>    <a href="none.xlsx" class="links item">9</a>    <a href="none.cpp" class="links item last">10</a></p></body></html>