【web前端(四)】html_选择器
我们来看一看常用的几个选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<!--
页面内联通过<style></style>标签在页面内定义一些命名的样式组，
页面中的标签可以引用这些样式组的名字来应用样式。
-->
<style>
/**
*类选择器（伪类）
*一定是点开头，这里我们要说的是，
*如果在页面体内有样式应用了<style>中的类，
*那么该对象就有了类里面定义的相应属性
*/
.text1{
color:blue;
font-family:"微软雅黑";
font-size:"30" ;
}
/**
*标签选择器样式（重定义样式）
*这种样式名要写成和标签一样的名字，
*那么页面中该标签所有的样式，
*都会被定义成我们在标签选择器中所定义的样式。
* (即在操作之前、操作时、操作之后标签得样式分别不同)
*/
/*以下标签选择器为伪类*/
/*伪类可以给标签得不同状态定义样式*/
a:link{
color:black;
text-decoration:none;
}
a:hover{
color: red;
text-decoration: none;
}
a:active{
color:blueviolet;
text-decoration: none;
}
a:visited{
color: saddlebrown;
text-decoration: none;
}
b{
color:saddlebrown;
}
/**
* 星选择样式器：
* 作用是所有的标签属性都由星选择样式器决定
*这是有就近原则规定的
*/
*{
color:skyblue;
}
/**
* 复合选择器
*/
/* 背景样式：这种样式由class来应用*/
.bg1{
background-color:blanchedalmond;
}
.text1{
border:double darkblue ipx;
}
/**
* 交叉选择器
* 既有重定义，又有类定义。
*/
h1.text1{
/*倾斜*/
font-style:italic;
}
/**
* 并集选择器
* (复合样式)
* 既有h3字体大小，又有.ttt伪类的字体样式。
*/
h3,.ttt{
font-family: "楷体";
}
/**
* 后代选择器
*/
.text1 h3{
border:double darkblue 1px;
}
/**
* id选择器：
* 样式必须根据id名称修改对应的样式
* 对某一个样式中的标签进行重定义，
* 就适合用该选择器。
*/
#st{
color:green;
}
</style>
</head>
<body>
<h1>我想看看怎么显示！<h1>
<h2 class="ttt">我想看看怎么显示！</h2>
<h3>我想看看怎么显示！</h3>
<h4>我想看看怎么显示！</h4>
<!--
这里要注意的是，后代选择器与子元素选择器的区别就在于，
后代选择器包括“孙子”，而子元素选择器只包括“儿子”。
-->
<div class="text1">
<div>
<h3>孙子子也是后代</h3>
</div>
<h3>后代选择器</h3>
<!--区别在于有没有加框-->
<h2>这个不需要应用后代选择器的样式</h2>
<div>段落块</div>
<h1 class="text1 bg1">这是准备应用类样式的内容</h1><br />
<h1>不准备应用重定义样式的内容</h1><br />
<h3 class="ttt">这是准备应用类样式的内容</h1><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
<a href="#">这是准备应用类样式的内容</a><br />
<!--<b>的作用是字体加粗-->
<b>应用重定义选择器样式</b><br />
<b>应用重定义选择器样式</b><br />
<b>应用重定义选择器样式</b><br />
<!--在id选择器下的样式必须要有一个名字-->
<div id="st">
这是准备应用类样式的内容
</div>
</body>
</html>
相关文章
- 技术分享 | web前端的HTML浅析
- 请简述web开发中的兼容问题
- 《Web前端开发精品课 HTML与CSS进阶教程》——第02章 语义化2.1 语义化简介
- 《HTML与CSS入门经典（第8版）》——2.4 在没有Web服务器情况下分发内容
- HTML、HTTP、Web综合面试题（四）
- WEB前端大作业-个人资料展示响应式网页模板（HTML JS CSS）
- Web网站模板-餐厅饭店宣传响应式网站模板(HTML+CSS+JavaScript)
- 【web前端(二十)】html_z-index(叠放)
- 【web前端(十三)】html_盒模型——阴影
- 【web前端(十一)】html_盒模型——边框
- 【web前端(八)】html_样式的层叠性、继承性和特殊性
- 【web前端(三)】html_嵌入式框架