赞
踩
目录
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>基本选择器</title>
- <!--
- 基本选择器
- 1、类选择器
- 2、id选择器
- 3、标签选择器
- 4、通配符选择器
- -->
- <style>
- /* 1、class选择器,一个标签可以设置一个或者多个选择器
- 指的是标识test1这个类型
- class属性可以填写多个类型
- 写在后面的class属性值覆盖前面的值 */
- .test1{
- color: aqua;
- }
- .test2{
- color: beige;
- }
- .test3{
- color: rgb(255, 205, 228);
- }
- /*
- id选择器用#标识
- #id属性值
- */
- #tesd-id{
- color: brown;
- }
- /*
- 3、标签选择器
- 直接使用标签名称
- */
- span{
- /* 背景 */
- background-color: bisque;
- }
- /*
- 4、通配符选择器,不建议使用
- 会选中html页面全部元素
- */
- *{
- background-color: black;
- }
- </style>
- </head>
- <body>
- <span class="test1 test3">测试文字</span>
- <span class="test2">测试文字</span>
- <span id="tesd-id">测试文字</span>
- </body>
- </html>

测试不同关系时要将其他关系测试代码注释掉,以防相互影响。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>关系选择器</title>
- <!--
- 1、父子
- 2、祖先、后代
- 3、相邻兄弟
- 4、兄弟
- -->
- <style>
- /* 父子关系测试,渲染子标签,下面的代码渲染的是测试内容p和测试内容span,因为span在p里面 */
- div>p{
- color: aqua;
- }
- /* 祖先后代关系测试,渲染后代,又被成为后代选择器 */
- /* div span{
- color: brown;
- } */
- /* 相邻兄弟关系测试,注意是相邻的也就是在下面例子中只有测试1改变,且+只代表向下渲染*/
- /* .div+span{
- color: brown;
- } */
- /* 兄弟选择器,这个选的是全部的兄弟,同理也只可以向下渲染 */
- #test-p~span{
- color: blueviolet;
- }
- </style>
- </head>
- <body>
- <!-- 父子关系测试 -->
- <div>
- 测试内容--div
- <p>
- 测试内容-p
- <span>测试内容-span</span>
- <span>测试内容-span</span>
- </p>
- <p>测试内容-p</p>
- </div>
- <!-- 祖先后代测试 -->
- <!-- <div>
- 测试内容--div
- <p>
- 测试内容-p
- <span>测试内容-span</span>
- <span>测试内容-span</span>
- <span>测试内容-span</span>
- </p>
- </div> -->
- <!-- 相邻兄弟关系测试 -->
- <!-- <div class="div">
- 测试内容--div
- <p>
- 测试内容-p
- <span class="test1">测试内容-span</span>
- <span class="test2">测试内容-span</span>
- <span id="test-1">测试内容-span</span>
- </p>
- </div>
- <span>测试1</span>
- <span>测试2</span>
- <span>测试3</span>
- <span>测试4</span> -->
- <!-- 兄弟关系测试 -->
- <!-- <div class="div">
- 测试内容--div
- <p>
- 测试内容-p
- <p id="test-p">ppp测试</p>
- <span class="test1">测试内容-span</span>
- <span class="test2">测试内容-span</span>
- <span id="test-1">测试内容-span</span>
- </p>
- </div>
- <span>测试1</span>
- <span>测试2</span>
- <span>测试3</span>
- <span>测试4</span> -->
- </body>
- </html>

- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>属性选择器</title>
- <!--
- 1、属性名
- 2、属性名=属性值
- 3、属性名^= (以某某开头的)
- 4、属性名$=属性值 (以某某结尾的)
- 5、属性名*=属性值 (包含某某)
- -->
- <style>
- /* 属性名 */
- [title]{
- color: brown;
- }
- /* 属性名 = 属性值 */
- [class="abcd"]{
- color: aqua;
- }
- /* 属性名^= (以某某开头的) */
- [title^="a"]{
- font-size: 120px;
- }
- /* 属性名$=属性值 (以某某结尾的) */
- [title$="c"]{
- color: blueviolet;
- }
- /* 属性名*=属性值 */
- [title*="bc"]{
- background-color: aqua;
- }
- /* 选择以a开头的属性title相邻的p标签 */
- [title^="a"]+p{
- color: chartreuse;
- }
- </style>
- </head>
- <body>
- <div title="a">a</div>
- <div title="ab">ab</div>
- <div title="abc">abc</div>
- <p class="abcd">abcd</p>
- </body>
- </html>

- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>复合选择器</title>
- <!--
- 交集
- 并集
- 可以组合各种选择器,包括属性选择器,关系选择器,基本选择器
- -->
- <style>
- /* 交集 */
- .pc2#p1{
- color:red;
- }
- /* 并集 */
- .pc2,.d1{
- color:yellow;
- }
- [id="p1"],[class="d1"]{
- font-size: 120px;
- }
- </style>
- </head>
- <body>
- <p id="p1" class="pc1">测试内容1</p>
- <p id="p1" class="pc2">测试内容2</p>
- <div id="d1" class="d1">测试内容3</div>
- <div id="d1" class="d2">测试内容4</div>
- </body>
- </html>

- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>伪类选择器</title>
- <!--
- 这个冒号后面的就是伪类选择器,
- 伪类选择器,就是这是一个操作,
- 不是一个标签之类的东西下面例
- 子就是鼠标悬停后要产生的变化。
- -->
- <style>
- div{
- width: 200px;
- height: 200px;
- border: 1px solid black;
- background-color: yellow;
- }
- div:hover{
- width: 50px;
- height: 50px;
- border: 1px solid black;
- background-color: blue;
- }
- </style>
- </head>
- <body>
- <div>
-
- </div>
- </body>
- </html>

- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>伪类选择器-操作标签</title>
- </head>
- <style>
- /* 未访问标签 */
- [href]:link{
- color: aqua;
- }
- /* 按压标签 */
- [href]:active{
- color: rgb(0, 255, 51);
- }
- /* 访问后标签 */
- [href]:visited{
- color: yellow;
- }
- /* 悬停标签 */
- [href]:hover{
- color: blueviolet;
- }
- </style>
- <body>
- <a href="./2.1基本选择器.html">跳转到2.1</a>
- </body>
- </html>

- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>伪类选择器-操作表单</title>
- <style>
- /* 表示input标签的被选中属性,宽会变成100px */
- input:checked{
- width: 100px;
- }
- /* 表示获得鼠标焦点的元素宽会变成200px */
- input:focus{
- width: 200px;
- }
- /* 这个展示的是not属性表示除了not括号里面的属性执行的操作 */
- input:not([type="submit"]){
- width: 500px;
- }
-
- </style>
- </head>
-
- <body>
- <form action="">
- username:<input type="text" name="username" id="username"><br>
- password:<input type="password" name="password" id="password"><br>
- nickname:<input type="text" name="nickname" id="nickname"><br>
- 爱好:<br>
- <input type="checkbox" name="hobby" id="hobby1">看书<br>
- <input type="checkbox" name="hobby" id="hobby1">听音乐<br>
- <input type="checkbox" name="hobby" id="hobby1">吃饭<br>
- <input type="submit" value="注册">
- </form>
- </body>
- </html>

对表单的一些操作,此次操作显示的是最后一个操作的结果
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>伪类选择器-操作结构</title>
- <style>
- /* first-chile 表示所属父级的第一个同类型元素,若第一个不是同类型不渲染 */
- li:first-child{
- color: aqua;
- }
- /* first-of-type 表示所属父级的第一同类型元素,若第一个不是同类型也渲染 */
- li:first-of-type{
- color: red;
- }
- /* 链式写法,就是将不同的东西拼接,下面就是,当鼠标悬停到到first-of-type所指的地方变黄 */
- li:first-of-type:hover{
- color: yellow;
- }
- /* 指定索引元素 n代表全部,2n代表偶数变,2n-1代表奇数变,odd奇数变,even偶数变*/
- li:nth-child(4){
- color: palevioletred;
- }
- </style>
- </head>
- <body>
- <div>
- <ul>
- <p>测试内容</p>
- <li>测试内容1</li>
- <li>测试内容2</li>
- <li>测试内容3</li>
- <li>测试内容4</li>
- <li>测试内容5</li>
- </ul>
- </div>
- </body>
- </html>

不嫌弃的点点关注,点点赞 ଘ(੭ˊᵕˋ)੭* ੈ✩‧₊˚
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。