您的位置：首页 > Web前端 > JavaScript

HTML5+CSS3+JS学习笔记-4

2016-12-07 21:31 555 查看

今天学习了3个东西：CSS属性选择器练习,CSS伪类选择器,CSS伪对象选择器

样例代码如下：

-------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS属性选择器练习</title>

<style type="text/css">

/*input标签中class属性的所有元素*/

/*input[class]{
background-color:#ffe4e1;

}*/

/*input标签中class属性是first的所有元素*/

/*input[class='first']{
background-color:#CCFFFF;

}*/

/*class属性是second的所有元素,试过IE、360安全浏览器、火狐浏览器都不行，可能是浏览器版本问题*/

/*[class='first']{
background-color:#333333;

}*/

/*input标签中name属性值以first开头的元素，^= 表示以什么开头的*/

/*input[name^=first]{
background-color:#333333;

}*/

/*input标签中name属性值以name结尾的元素 $= 表示以什么结尾的*/

/*input[name$=Name]{
background-color:#333333;

}*/

/*input标签中name属性值中包含 stNa 字符串的元素 *= 表示包含有什么字符串的*/

input[name*=stNa]{
background-color:#333333;

}

</style>

</head>

<body>

<input type="text" name="firstName" value="tom" class="first"><br>

<input type="text" name="midName" value=""><br>

<input type="text" name="lastName" value="mark"><br>

<input type="text" name="tv" value="深圳TV" class="second"><br>

</body>

</html>

-------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS伪类选择器</title>

<style type="text/css">

/*html{
border:#c00 solid 1px;

}*/

/* :root = html */

:root{
border:#c00 solid 1px;

}

/* li的父元素（ul）的第一个子元素 */

/*li:first-child{
color:#0000FF;

}*/

/* li的父元素（ul）的最后一个子元素 */

/*li:last-child{
color:#FF0000;

}*/

/* li的父元素（ul）的第2个子元素 nth-child(n) 第n个子元素*/

/*li:nth-child(2){
color:#FF0000;

}*/

/* li的父元素（ul）的倒数第1个子元素 nth-last-child(n) 倒数第n个子元素*/

/*li:nth-last-child(1){
color:#FF0000;

}*/

/* li的父元素（ul）的倒数第1个子元素 nth-last-child(n) 倒数第n个子元素*/

li:nth-last-child(1){<
4000
br />color:#FF0000;

}

/*选择可用的元素*/

:enabled{
color:#FC0;

}

/*选择不可用的元素*/

:disabled{
color:#FC0006;

}

/*选择已经选择的元素,试过IE、360安全浏览器、火狐浏览器都不行，可能是浏览器版本问题*/

:checked{
color:#FC0006;

}

</style>

</head>

<body>

<ul id="china">
<li>三国演义</li>
<li>水浒传</li>

<li>西游记</li>

</ul>

<ul id="usa">
<li>曼谷杀手</li>
<li>正义杀戮</li>

<li>魔女玛塔</li>

</ul>

<ul id="korea">
<li>傻瓜</li>

</ul>

<br><br>

<input type="text" value="TOM"><br><br>

<input type="text" value="北极" disabled><br><br>

<input type="checkbox" checked="checked" value="1">记住密码<br>

</body>

</html>

-------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>CSS伪对象选择器</title>

<style type="text/css">

/*before 和 after 可替代原来的span标签作用，减少页面代码*/

/*:before mess 之前添加盒子必须和 content 结合使用，即使是空盒子*/

#mess:before{
content:'前面信息';
width:250px;
background-color:#F06;
display:inline-block;

}

/*:after mess 之后添加盒子必须和 content 结合使用，即使是空盒子*/

#mess:after{
content:'后面信息';
width:250px;
background-color:#036;
display:inline-block;

}

</style>

</head>

<body>

<div id="mess">测试信息</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航