标签：导入 20px cti 行操作 height span eve 重复 click
1. 行内引入
<div> <p style="color: green">我是一个段落</p> </div>
2. 内接样式
<style type="text/css"> /*写我们的css代码*/ span{ color: yellow; } </style>
3. 外接样式 - 链接式
<link rel="stylesheet" href="./index.css">
4. 外接样式 - 导入式
<style type="text/css"> @import url(‘./index.css‘); </style>
<style> div{ color: red; width: 200px; height: 200px; /*background-color: yellow;*/ } </style>
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
body{
color:gray;
font-size: 12px;
}
/*标签选择器*/
p{
color: red;
font-size: 20px;
}
span{
color: yellow;
}
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
.lv{ color: green; } .big{ font-size: 40px; } .line{ text-decoration: underline; }
<!-- 公共类 共有的属性 --> <div> <p class="lv big">段落1</p> <p class="lv line">段落2</p> <p class="line big">段落3</p> </div>
同一个页面中id不能重复。
任何的标签都可以设置id ，id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}
<body> <div id="box">娃哈哈</div> <div id="s1">爽歪歪</div> <div id="s2">QQ星</div> </body>
所有的标签都会被选中
* {color : red;}
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）
<head> <meta charset="UTF-8"> <title>Title</title> <style> div span{ color: tomato; } </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p
<head> <meta charset="UTF-8"> <title>Title</title> <style> div>span{ color: tomato; } </style> </head> <body> <div> 我是div标签的content <span>西红柿色1</span> <p> 在div-p标签中 <span>西红柿色2</span> </p> </div> <span>我只是一个单纯的span标签</span> </body>
使用+表示毗邻选择器。比如span+a，只找span标签下面一个的a标签，找不到就算了
<style> span+a{ color: tomato; } </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> </div>
使用~表示弟弟选择器。比如span~a，找span下面所有的a标签
<style> span~a{ color: tomato; } </style> <div> <a>我是a0标签</a> <span>span标签</span> <a>我是a1标签</a> <!--变色--> <a>我是a2标签</a> <!--变色--> </div>
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
<style> /*a[href]{*/ /*color: green;*/ /*}*/ /*a[href=‘http://www.taobao.com‘]{*/ /*color: lightpink;*/ /*}*/ input[type=‘text‘]{ background-color: lightblue; } </style> <body> <div> <a href="http://www.taobao.com">我是a0标签</a> <span>span标签</span> <a href="http://www.jd.com">我是a1标签</a> <a href="http://www.mi.com">我是a2标签</a> <a>没有href属性</a> </div> <input type="text"> <input type="password"> </body>
多个选择器之间用逗号隔开，表示选中的页面中的多个标签。一些共性的元素可以使用并集选择器
<style> ul,ol,span{ background-color: gainsboro; } </style> <body> <ul> <li>u-first</li> </ul> <ol> <li>o-first</li> </ol> </body>
使用 . 表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
<style> div.box1.box2{ background-color: red; width: 200px; height: 200px; } </style> <body> <div class="box1 box2">box1box2</div> <div class="box1">box1</div> <div>aaa</div> <span class="box1">span标签</span> </body>
提前对标签进行定义
<style> a:link{ color:tomato; } a:visited{ color: gray; } a:active{ color: green; } input:focus{ background-color: aquamarine; } div{ width: 100px; height: 100px; background-color: lightgray; } div:hover{ background-color: pink; } </style> <body> <a href="http://www.jd.com">京东</a> <a href="http://www.xiaohuar.com">校花</a> <input type="text"> <div></div> </body> 其中 a : link（未访问过的链接） visited（访问过的链接） active（鼠标在链接按下时） input: focus（获取焦点后） 通用: hover（鼠标悬浮时）（通用）
对选到的元素进行操作（通用）
<style> p:first-letter{ color: green; } p:before{ content: ‘**‘; /*color: pink;*/ } p:after{ content: ‘.....‘; color: lightblue; } </style> <body> <div>春江水暖鸭先知</div> </body> 其中 first-letter 操作第一个字符 before 在语句前操作 after 在语句后操作
标签：导入 20px cti 行操作 height span eve 重复 click
原文地址：https://www.cnblogs.com/biulo/p/11324147.html
