HTML5+CSS3+JS学习笔记-4-CSDN博客

本文链接：https://blog.csdn.net/xionghui2007/article/details/53510663

今天学习了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){
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>