CSS样式选择器

最新推荐文章于 2024-07-06 20:00:00 发布

Heavy_Dream

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量385

点赞数

分类专栏： HTML从入门到放弃——CSS样式表

本文链接：https://blog.csdn.net/Heavy_Dream/article/details/78238694

版权

HTML从入门到放弃——CSS样式表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>样式选择器——演示</title>

<style type="text/css">
/* 标签选择器 */
li{
color:red;
font-size:20px;
font-family:楷体;
}
/* 类选择器 */
.li_className{
color:blue;
font-size:40px;
font-family:隶书;
}
/* ID选择器 */
#idCss{
color:white;
font-family:宋体;
background-color:red;
width:200px;
height:100px;
}
/* 优先级：标签选择器->类选择器->ID选择器 */

/* 选择器的组合 */
p,span,.className2,#divID1{
background-color:black;
color:white;
}

/* 选择器的嵌套 */
ol li{
color:#0FF;
}
div p{
color:red;
}

input{
color:#cccccc;
}
/* 针对属性选择器 */
input[type=text]{
background-color:red;
}
input[type=button]{
background:#33FFCC;

}

/* 通用选择器 */
*{
css代码

}

强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义(有点小学数学中的提取公因式)，这样可以大大精简代码；既然有这么强大的功能为什么是用的最少呢，同样还是因为他的强大，他是对父级元素内的所有标签进行定义，所以只要你定义了，那么父级里面的所有的标签，甭管有没有必要，也都相当于加上了通用选择器里面的代码了

</style>
</head>

<body>
<ul>
<li class="li_className">家用电器</li>
<li>各类书籍</li>
<li>手机数码</li>
<li>日用百货</li>
<li class="li_className" id="idCss">应有尽有</li>
</ul>
<p>标签选择器</p>
<p>类选择器</p>
<div id="divID1">id选择器</div>
<span>CSS样式表</span>
<div class="className2">从入门到放弃</div>
<ol>
<li>注册</li>
<li>填写资料</li>
<li>登录</li>
</ol>
<div><p>内嵌选择器</p></div>
<hr />
<input type="text" name="username" placeholder="请输入" /><br />
<input type="button" value="新增" /><br />
<input type="checkbox" name="ck" value="-1" />
</body>

</html>

效果截图：