html5选择器基本操作

最新推荐文章于 2024-04-21 11:00:35 发布
最新推荐文章于 2024-04-21 11:00:35 发布
阅读量1.3k 收藏 1
点赞数 2
文章标签： html5 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_47051731/article/details/106592774
版权

一、结构性伪类选择器

1、类选择器
在css中可以使用类选择器把相同的元素定义成不同的样式。比如：
p.left{text-align: left}
p.rigth{text-align: right}

2、伪类选择器
类选择器和伪类选择器的区别在于，类选择器我们可以随意起名，而伪类选择器是CSS中已经定义好的选择器，不可以随意起名。
最常见的伪类选择器
a:link{ color: #ff6600 } 未被访问的链接
a:visited{ color: #87b291 } 已被访问的链接
a:hover{ color: #6535b2 } 鼠标指针移动到链接上
a:active{ color: #55b28e } 正在被点击的链接

3、伪元素选择器
伪元素选择器，针对于CSS中已经定义好的伪元素使用的选择器。
使用方法：
选择器：伪元素{属性：值}
与类配合使用
选择器.类名：伪元素{属性：值}

4、在CSS中，主要有四个伪元素选择器。

1）、first-line伪元素选择器
first-line伪元素选择器用于向某个元素中的第一行文字使用样式。

2）、first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或者是日文等汉字）使用样式。

3）、before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容。

4）、after伪元素选择器
after伪元素选择器用于在某个元素之后插入内容。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器以及伪元素</title>
    <style>
        :root{
            background: #126fb0;
        }
        body{
            background: #ffffff;
        }
        p.aaas{
            text-align: left;
            color: red;
        }
        p.right{
            text-align: right;
            color: green;
        }
        a:link{
            color: #000;
        }
        a:visited{
            color: fuchsia;
        }
        a:hover{
            color :green;
        }
        a:active{
            color: #ff6600;
        }
        p:first-line{
            color: #f60;
        }
        p:first-letter{
            color: green;
            font-size: 24px;
        }
        li{
            list-style: none;
        }
        li:before{
            content:"...";
            color: red;
        }
        li:after{
            content: "__after追加";
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>类选择器</h1>
<p class="aaas">伪类选择器以及伪元素</p>
<p class="right">伪类选择器以及伪元素</p>

<br/>
<a href="index1.html">伪类选择器</a>
<br/>
<p>
        在CSS中，主要有四个伪元素选择器<br/>
        first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
</p>
<ul>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
    <li><a href="index1.html">伪类选择器</a></li>
</ul>
</body>
</html>

5、结构性伪类选择器root、not、empty和target
1）、root选择器
root选择器将样式绑定到页面的根元素中。
2）、not选择器
想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，我们就可以使用not选择器。
3）、empty选择器
empty选择器指定当元素中内容为空白时使用的样式。
4）、target选择器
target选择器对页面中某个target元素指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。

root、not、empty的代码总和：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TARGET</title>
    <style>
        :target{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

target的代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TARGET</title>
    <style>
        :target{
            background: #000;
            color: #fff;
        }
    </style>
</head>
<body>
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<div id="A">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容.........</p>
</div>
</body>
</html>

6、选择器first-child、last-child、nth-child和nth-last-child
1）、first-child选择器
first-child单独指定第一个子元素的的样式。
li:first-child{
background: #ff6600;
}

2）、last-child选择器
last-child单独指定最后一个子元素的的样式。

  li:last-child{
            background: green;
   }

3）、nth-child选择器
nth-child(n) 选择器匹配正数下来第 N 个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素

li:nth-child(odd){
            background: red;
        }

4）、nht-last-child选择器
nth-last-child(n) 选择器匹配倒数数下来第 N 个子元素
nth-last-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-last-child(even)选择器匹配倒数下来第偶数个子元素

li:nth-last-child(odd){
            background: green;
        }

li:nth-last-child(even){
            background:gray;
        }

7、选择器nth-of-type和nth-last-of-type

1）、在使用nth-child和nth-last-child时产生的问题
在案例中指定奇数文章的标题背景为黄色，偶数文章的标题为绿色。

h2:nth-child(even){
            background: #693ada;
        }

h2:nth-of-type(odd){
            background: #126fb0;
        }

2）、使用nth-of-type和nth-last-of-type
nth-of-type和nth-last-of-type在css3中就是用来避免上面这类问题的发生，在统计的时候就只针对同类型的子元素进行计算。
nth-of-type正数
nth-last-of-type倒数

h2:nth-last-of-type(even){
            background: #f60;
        }

兼容性：
nth-of-type和nth-last-of-type都是CSS3开始提供需要在IE8以上的浏览器才会被支持，Chrome浏览器、Firefox浏览器、Opera浏览器、Safari浏览器都支持！

8、循环使用样式
nth-child(An+B)A表示每次循环中共包括几种样式，B表示指定的样式在循环中所处的位置。

li:nth-child(3n+1){
            background: #126fb0;
        }
        li:nth-child(3n+2){
            background: #ff6600;
        }li:nth-child(3n+3){
            background: #ff1b00;
        }
        li:nth-child(4n+3){
            background: #000000;
        }
        li:nth-child(4n+4){
            background: green;
        }

9、only-child选择器
only-child选择器，只对唯一的子元素起作用。

li:only-child{
            background: #ff1b00;
        }

二、UI元素状态伪类选择器

1、选择器E:hover、E:active和E:focus

1)、E:hover选择器被用来指定当鼠标指针移动到元素上时元素所使用的样式
使用方法：
<元素>:hover{
CSS样式
}
我们可以在“<元素>”中添加元素的type属性。
例：
input[type=“text”]:hover{
CSS样式
}

2)、E:active选择器被用来指定元素被激活时使用的样式
3)、E:focus选择器被用来指定元素获得光标聚焦点使用的样式，主要是在文本框控件获得聚焦点并进行文字输入时使用。
4)、小案例：
结合上诉实现以下效果，当鼠标移动上去是文本框变成绿色，当鼠标点击时（点击并未谈起）文本框处于蓝色，当处于可输入状态时文本框变成橙色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>选择器E:hover、E:active和E:focus</title>
    <style>
        input[type="text"]:hover{
            background: green;
        }

        input[type="text"]:focus{
            background: #ff6600;
            color: #fff;
        }

        input[type="text"]:active{
            background: blue;
        }
        input[type="password"]:hover{
            background: red;

        }
    </style>
</head>
<body>
<h1>选择器E:hover、E:active和E:focus</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名">
    <br/>
    <br/>
    密码：<input type="password" placeholder="请输入密码">
</form>
</body>
</html>
2、E:enabled伪类选择器

1)、E:enabled选择器被用来指定当元素处于可用状态时的样式。
2)、E:disabled选择器被用来指定当元素处于不可用状态时的样式。
3)、小案例：
结合上诉实现以下效果，文本框可用时背景颜色绿色，不可用时背景变成浅灰色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:enabled伪类选择器与E:disabled伪类选择器</title>
    <style>
        input[type="text"]:enabled{
            background: green;
            color: #ffffff;
        }
        input[type="text"]:disabled{
            background: #727272;

        }
    </style>
</head>
<body>
<h1>E:enabled伪类选择器与E:disabled伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" disabled>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
3、E:read-only伪类选择器

1)、E:read-only选择器被用来指定当元素处于只读状态时的样式。
2)、E:read-write选择器被用来指定当元素处于非只读状态时的样式。
3)、小案例：
结合上诉实现以下效果，文本框可用时输入文字变成红色，不可用时，设置里面的背景为黑色，文字为绿色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>read-only伪类选择器与E:read-write伪类选择器</title>
    <style>
        input[type="text"]:read-only{
            background: #000;
            color: green;
        }
        input[type="text"]:read-write{
            color: #ff6600;
        }
    </style>
</head>
<body>
<h1>read-only伪类选择器与E:read-write伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" value="朱朝兵" readonly>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
4、伪类选择E:checked、E:default和indeterminate

1)、E:cehcked伪类选择器用来指定当表单中的radio单选框或者是checkbox复选框处于选取状态时的样式。
2)、E:default选择器用来指定当页面打开时默认处于选取状态的单选框或复选框的控件的样式。
3)、E:indeterminate选择器用来指定当页面打开时，一组单选框中没有任何一个单选框被设定为选中状态时，整组单选框的样式。
4)、小案例：
A、模拟一个发布房产信息的选框控件，当选择以后，会给他一个2px 实线 绿色的边框！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>checked伪类选择器</title>
    <style>
        input[type="checkbox"]:checked{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>checked伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox">水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

B、实现一个默认选择中的控件，默认给他一个2px 实线 绿色的边框！
效果：
当他去掉勾以后还会有样式

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>default伪类选择器</title>
    <style>
        input[type="checkbox"]:default{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>default伪类选择器</h1>
<form>
    房屋状态：
    <input type="checkbox" checked>水
    <input type="checkbox">电
    <input type="checkbox">气
    <input type="checkbox">光纤
</form>
</body>
</html>

C、实现一个在默认打开都没有选中时，给他们一个2px 实线 绿色的边框！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>indeterminate伪类选择器</title>
    <style>
        input[type="radio"]:indeterminate{
            outline: 2px solid green;
        }
    </style>
</head>
<body>
<h1>indeterminate伪类选择器</h1>
<form>
    性别：
    <input type="radio">男
    <input type="radio">女
</form>
</body>
</html>
5、伪类选择器E::selection

1)、E:selection伪类选择器用来指定当元素处于选中状态时的样式。
2)、小案例：
选择网页中p段落中的文字和文本框中的文字，改变他的背景颜色为绿色！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>伪类选择器E::selection</title>
    <style>
        ::selection{
            background: green;
            color: #ffffff;
        }
        input[type="text"]::selection{
            background: #ff6600;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>伪类选择器E::selection</h1>
<p>今天，我们在这里隆重举行南京大屠杀死难者国家公祭仪式，缅怀南京大屠杀的无辜死难者，缅怀所有惨遭日本侵略者杀戮的死难同胞，缅怀为中国人民抗日战争胜利献出生命的革命先烈和民族英雄，表达中国人民坚定不移走和平发展道路的崇高愿望，宣示中国人民牢记历史、不忘过去，珍爱和平、开创未来的坚定立场。</p>
<input type="text" placeholder="文本">
</body>
</html>
6、E:invalid伪类选择器与E:valid伪类选择器

1)、E:invalid伪类选择器用来指定，当元素内容不能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容不符合元素规定的格式时的样式。
2)、E:valid伪类选择器用来指定，当元素内容能通过HTML5通过使用的元素的诸如requirde等属性所指定的检查或元素内容符合元素规定的格式时的样式。
3)、小案例：
通过Email属性的表单判断输入是否正确，正确输入的内容为绿色，输入错误就是红色！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:invalid伪类选择器与E:valid伪类选择器</title>
    <style>
        input[type="email"]:invalid{
            color: red;
        }
        input[type="email"]:valid{
            color: green;
        }
    </style>
</head>
<body>
<h1>E:invalid伪类选择器与E:valid伪类选择器</h1>
<form>
    <input type="email" placeholder="请输入邮箱">
</form>
</body>
</html>
7、E:required伪类选择器与E:optional伪类选择器

1)、E:required伪类选择器用来指定允许使用required属性，而且已经指定了required属性的input元素、select元素以及textarea元素的样式。
2)、E:optional伪类选择器用来指定允许使用required属性，而且未指定了required属性的input元素、select元素以及textarea元素的样式。
3)、小案例：
姓名必填表单背景红色，年龄可选填表单背景绿色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:required伪类选择器与E:optional伪类选择器</title>
    <style>
    input[type="text"]:required{
        background: red;
        color: #ffffff;
    }
        input[type="text"]:optional{
            background: green;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:required伪类选择器与E:optional伪类选择器</h1>
<form>
    姓名：<input type="text" placeholder="请输入姓名" required>
    <br/>
    <br/>
    学校：<input type="text" placeholder="请输入学校">
</form>
</body>
</html>
8、E:in-range伪类选择器与E:out-of-range伪类选择器

1)、E:in-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，且实际的输入值在该范围之内时的样式。
2)、E:out-of-range伪类选择器用来指定当元素的有效值被限定在一段范围之内，但实际输入值在超过时使用的样式。
3)、小案例：
0-100以内的数字，小于0或超过100字体变成红色，否则绿色。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>E:in-range伪类选择器与E:out-of-range伪类选择器</title>
    <style>
        input[type="number"]:in-range{
            color: #ffffff;
            background: green;

        }
        input[type="number"]:out-of-range{
            background: red;
            color: #ffffff;
        }
    </style>
</head>
<body>
<h1>E:in-range伪类选择器与E:out-of-range伪类选择器</h1>
<input type="number" min="0" max="100" value="0">
</body>
</html>

三、通用兄弟元素选择器

通用兄弟元素选择器
他用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

使用方法：
<子元素>~<之元素之后的同级兄弟元素>{
CSS样式
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        span~p{
            background: green;
        }
    </style>
</head>
<body>
<div>
    <span>123465164</span>
    <span>123465164</span>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>

</div>
<span>123465164</span>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
<div>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
    <p>今天太阳可真大啊</p>
</div>
<p>今天太阳可真大啊</p>
<p>今天太阳可真大啊</p>
</body>
</html>

四、使用选择器在页面中插入内容

1、插入文字

1）使用选择器插入内容
在CSS2中，使用before选择器在元素前面插入内容，使用after在元素后面插入内容，在选择器content属性中定义要插入的内容。

例如对H2使用before选择器在H2的前面插入文字“Title”。

 <style type="text/css"> 
 h2:before{
 content:"Title";
 }
 </style>

并且我们还可以给他定义样式，进行美化操作。
比如我们给“Title”的文字设置为白色，加上绿色的背景，内边距上下1像素左右5像素，外边距右边5像素，当然还可以设置他的字体等等。

2）排除一些不需要插入内容的元素
使用content属性的追加一个none属性值。
比如：

2、插入图片

1）插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径，比如在标题前插入一张图片！

比如：

<style type="text/css"> 
 h2:before{
 content:url(1.gif);
 }
 </style>

2）插入图片文件的好处
节省开发人员的工作量，比如可以通过类的方式来进行不同标题图片的追加！
比如我们给标题定义一个“hot”“digest”分别来调用一张站的图标个顶的小图标！

<style type="text/css"> 
 h2.hot:before{ content:url(hot.gif); }
 h2.digest:before{ content:url(digest.gif); }
 </style>
<h2 class="hot">这是标题测试</h2>
<h2 class="digest">这是标题测试</h2>
<h2 class="hot">这是标题测试</h2>
<h2>这是标题测试</h2>
<h2>这是标题测试</h2>
3、插入项目编号

1）在多个标题前加上连续编号
在content属性中使用counter属性来正对对个项目追加连续的编号。
使用方法：

元素:before{
 content:counter(计数器);
 }

使用计数器来计算编号，计数器可以任意命名。
除了使用计数器，还需要在元素的样式中追加对元素的（counter-increment）属性的指定为content属性值中所指定的计数器名称。

元素{
 counter-increment:content属性值中所指定的计数器名称
 }
kaiwen310
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css选择器基础知识
SSSS__AS的博客
06-22 201
css -层叠样式表网页实际上是一个多层的结构，通过css可以分别为网页的每一层来设置样式， 而最终我们能看到的只有最上边的一层，css就是宝珠我们设置网页中元素的样式。网页分为结构，表现，行为三部分1.第一种方式：内联样式/行内样式（不推荐使用）写在开始标签里，写一个style属性，在style属性值里面写样式样式分为 样式名:样式值; 名值对的结构可以写多组样式，以;隔开即可缺点：结构和样式耦合；不容易修改。 2.内部样式表在head标签中，写一个style标签，在style里先选中对应的元素，然后
html 选择列表框,列表框的selected属性
weixin_31910545的博客
06-03 2179
Φ是什么意思？读"fai".是直径的意思不？“Φ”是数学中表示圆的直径的希腊字母。 “Φ”是希腊字母中的一个,读作fai,其写法分为两种,大写:Φ,小写:φ,小写时左上角的弯是开口的;而用作列表框和组合框有没有select属性列表框有selected，表示是否选中：If List1.Selected(i) Then 组合框只允许选一个，没有select，Combo1.ListIndex即为当前选中...
结构伪类选择器（总结）
12-22
什么是结构伪类选择器？ 结构伪类选择器是针对HTML的结构进行分类的选择器，特征就是位置 分为三大类 一类 e:first-child e:last-child e:only-child e:nth-child(n/even/odd)隔行换色，列表换色 e:nth-last-child 二类 e:first-of-type e:last-of-type e:only-of-type e:nth-of-type 三类 e:root e:empty e:target e:not 波浪选择器连接符~ 作用：两个css选择器通过波浪线连接起来，但只作用于后一个css选择器，并且必须出现前一个选择器才符
HTML学习笔记（四）伪类选择器、伪元素选择器、分组与嵌套、即一些基本属性介绍
m0_51734025的博客
12-23 1385
下面是看了林海峰老师的视频的学习笔记来与大家分享 一、伪类选择器 伪类选择器这里主要是为大家介绍a标签与input标签的CSS样式，下面用简单的案例加注解为大家介绍 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link{ ...
【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器
shsjssnn的博客
11-11 734
【基于HTML5的网页设计及应用】——链接伪类选择器和伪元素选择器
HTML5 Selection对象
weixin_30359021的博客
03-26 1974
一、实例1，设置网页选中内容并且复制到黏贴板 <p id='txtone'>发的FDSAFSDFDS！其实不管哪个行业， <img src='http://beijing.gongjuji.net/imgdata/big/4ba6635a-1e69-42b1-b64d-c25f655b4152.jpg'/> 都会遇到这个问题。所以企业员工自身幸福感...
html中的选择器事例,CSS中Selection 伪类选择器示例
weixin_39555415的博客
06-03 238
css中::selection可以重点显示页面中要显示的内容了，如可以通过color ， background-color ，background来进行设置下文来给各位介绍一个例子。::selection 伪类选择器用于突出显示的页面用户选择的任何部分，包括可编辑文本字段中的文本。此伪元素可应用于 color ， background-color ，background(background-co...
Html5（4）Selection 和 Range对象
puppyand123的博客
08-10 2171
HTML5的Selection 和 Range对象（一）①概念：代表页面上一段连续区域，通过Range可以修改（增删改）页面上任意区域 ②使用：获取选取内容的方法： 如图 ③Range对象包含几个方法：SelectNode、selectNodeContents、deleteContents 用于选取、删除元素的内容或整个元素结点 举例：如图 ④Range对象的其他方法：se
H5选择器
误人子弟是我成功的手段。
11-16 1429
选择器：基本选择器、层次选择器、属性选择器、结构伪类选择器、文本新增伪类选择器； 1.层次选择器： 1).后代选择器：A   B-------------找到A里面的所有B元素(子孙后代)； 2).子代选择器：A>B-------------找到A的子代里面的所有B元素(下一代、子代)； 3).相邻兄弟选择器：A+B--------找到紧邻A后面的兄弟B元素(找到下一个兄弟，如果下
jquery选择器简述
11-24
下面我们先来看看基本选择器总的CSS选择器： 1.标签选择器： $(“element”) 其中，参数element，表示待查找的HTML标记名，如$(“div”),标签选择器获取元素的方式是高效的，因为它继承自javascript中的...
jQuery表格(Table)基本操作实例分析
12-04
Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。 首先建立一个通用的表格css 和一个 表格Table： table { border-collapse: collapse; border-spacing: 0; margin-right: auto; ...
jQuery实现表格的增、删、改操作示例
12-09
这里实现的是在jQuery中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格的高亮行操作。 <head> <meta charset="UTF-8"> <title>...
Jquery基础教程之DOM操作
12-08
dom操作一般可以分为三个方面即DOM Core(核心)、HTM-Dom和CSS-DOM。 　每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码： 代码如下： <!DOCTYPE ...
HTML5 ＜video＞ 标签属性、API 方法、事件、自定义样式详解与实用示例
JINGWHALE
04-17 1016
HTML5 video 标签为网页内嵌视频提供了强大且便捷的功能。本文对 video 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍。
html5与css3前端学习笔记
我的个人博客
04-20 822
目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer，可以在Sublime text中通过package control 安装 autoprefixer。CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。3、E[attr^='ok'] 含有attr属性的元素且它的。2、E[attr='ok'] 含有attr属性的元素且它的。
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
最新发布
qq_30094821的博客
04-21 273
不需要在 HTML 中添加任何额外的标签，就能实现复杂的设计效果。
利用HTML实现秒表功能
K584122526的博客
04-17 660
启动</button><button id="restBn">复位
用html画一个四叶草
liulang68的博客
04-20 850
以上是部分代码，需要请看主页加联系方式。
HTML 入门
lvshihao_的博客
04-16 1029
全称：Internet Engineering Task Force（国际互联网工程任务组），成立于1985年底，是一个权威 的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准均出自IETF。全称：World Wide Web Consortium（万维网联盟），创建于1994年，是目前Web技术领域，最具影响力的技术标准机构。超文本：暂且简单理解为 “超级的文本”，和普通文本比，内容更丰富。注意：文档声明，必须在网页的第一行，且在 html 标签的外侧。
[HTML5] 颜色选择器的操作[input type='color'....]
06-07
HTML5中的颜色选择器可以通过`<input>`标签中的`type="color"`来实现。它可以让用户选择颜色并将其值作为十六进制颜色代码返回。 以下是使用颜色选择器的基本示例： ```html 选择颜色： ``` 在用户单击颜色选择...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值