CSS中常用的选择器
来源：互联网 发布：易语言赚钱源码 编辑：程序博客网 时间：2024/05/29 14:20
一、选择器
选择器：用来选择标签的，给选中的标签加样式。
常用的选择器有8+1种：
1）标签选择器
标签名{
样式规则
}
<style type="text/css">
p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p>人生若只如初见，何事悲风秋画扇。</p>
2）id选择器
<style type="text/css">#_1p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
</head>
<body>
<p id="_1p">人生若只如初见，何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见，如此便可不想恋。</p>
<p id="_1p">第二最好不相知，如此便可不想思。</p>
3）类选择器
<style type="text/css">
/*id唯一标识，虽然可以重用样式，但是js中取不到单一id的值，class可以重复*/
/*带标签名的类选择器*/
p.p1{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见，何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见，如此便可不想恋。</p>
<p class="p1">第二最好不相知，如此便可不想思。</p>
4）组合选择器
<style type="text/css">
/*id唯一标识，虽然可以重用样式，但是js中取不到单一id的值，class可以重复*/
/*.p1{
font-size:20px;
color:red;
background-color:#000;
}
#_1p{
font-size:20px;
color:red;
background-color:#000;
}
防止代码冗余,提高复用性*/
.p1,#_1p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见，何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见，如此便可不想恋。</p>
<p class="p1">第二最好不相知，如此便可不想思。</p>
5）子代选择器 和 后代选择器
①<style type="text/css">
/*子代选择器*/
div>p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<div>
<p id="_1p" class="p1">人生若只如初见，何事悲风秋画扇。</p>
<span><p id="_2p">第一最好不相见，如此便可不想恋。</p></span>
<p class="p1">第二最好不相知，如此便可不想思。</p>
</div>
② <style type="text/css">
/*后代(子孙)选择器*/
div p{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<div>
<p id="_1p" class="p1">人生若只如初见，何事悲风秋画扇。</p>
<span><p id="_2p">第一最好不相见，如此便可不想恋。</p></span>
<span><a href="子代选择器.html"><p class="p1">第二最好不相知，如此便可不想思。</p></a></span>
</div>
6）通配符选择器，整个页面都被选中
<style type="text/css">
/*即所有的标签都是相同的样式规则*/
*{
font-size:20px;
color:red;
background-color:#000;
}
</style>
<p id="_1p" class="p1">人生若只如初见，何事悲风秋画扇。</p>
<p id="_2p">第一最好不相见，如此便可不想恋。</p>
<p class="p1">第二最好不相知，如此便可不想思。</p>
</body>
7）属性选择器
<style>
div[data-test="haha"]{
color:blue;
}
/*class属性中包含import选择器*/
p[class~="import"]{
color:green;
}
/*class属性中包含import字符的*/
p[class*="import"]{
color:orange;
}
/*class属性中以import开头的*/
p[class^="import"]{
color:red;
}
/*class属性中以import结尾的*/
p[class$="import"]{
color:balck;
}
</style>
<div data-test="haha">
111
</div>
<div data-test="hihi">
222
</div>
<p class="import1 aaa bbb">p标签</p>
8）相邻兄弟选择器
<style>
/*h1下的第一个p标签*/
h1+p{
color:red;
}
/*h1下的所有标签*/
h1~p{
color:green;
}
</style>
<h1>一级标题</h1>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
<p>p标签</p>
9）伪类
定义在标签的状态上，许多浏览器支持不同类型的伪类，没有统一标准，但是超链接的伪类所有浏览器都支持，一共有四种状态：
a:link 未被访问的状态
a:visited 访问后的状态
a:hover 鼠标悬停状态
a:active 激活选定状态（即点击到松开鼠标的状态）
基本语法：
超连接状态{
css样式规则
}
后定义者优先
<style type="text/css">
a{ /*去掉字体下划线*/
text-decoration: none;
}
a:link{
color:green;
}
a:visited{
color:gray;
}
a:hover{
color:blue;
font-size:30px;
}
a:active{
color:red;
}
</style>
.class1{
font-size:20px;
color:red;
background-color:#000;
}
.class2{
color:#bad0ef;
}
</style>
p{
color:orange;
}
#p1{
color:green;
}
.p2{
color:red;
}
</style>
table.tableClass{
margin: 0px auto;
text-align: center;
width:80%;
}
tr.tableHead{
background-color:black;
color:#fff;
}
tr.winBlue{
background-color:#bad0ef;
color:blue;
}
tr:hover{
color:green;
}
</style>
<!--<table align="center" width="80%">
<tr class="tableHead">
<th width="8%">商品编号</th>
<th width="22%">商品名称</th>
<th width="40%">商品描述</th>
<th width="10%">商品种类</th>
</tr>
<tr align="center">
<td>1</td>
<td>Macbook air</td>
<td>苹果轻薄笔记本</td>
<td>笔记本</td>
</tr>
<tr align="center" class="winBlue">
<td>2</td>
<td>iPad air2</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
</tr>
<tr align="center">
<td>3</td>
<td>iphone6 plus</td>
<td>苹果最新手机</td>
<td>手机</td>
</tr>
</table> -->
<table class="tableClass">
<tr class="tableHead">
<th>商品编号</th>
<th>商品名称</th>
<th>商品描述</th>
<th>商品种类</th>
</tr>
<tr>
<td>1</td>
<td>Macbook air</td>
<td>苹果轻薄笔记本</td>
<td>笔记本</td>
</tr>
<tr class="winBlue">
<td>2</td>
<td>iPad air2</td>
<td>苹果最新平板电脑</td>
<td>平板电脑</td>
</tr>
<tr>
<td>3</td>
<td>iphone6 plus</td>
<td>苹果最新手机</td>
<td>手机</td>
</tr>
</table>
- Css中常用的选择器
- CSS中常用的选择器
- css中常用的选择器(一)
- css中常用的选择器(二)
- CSS中常用的四种选择器
- css中一些常用选择器的介绍
- 常用css的选择器
- 常用的css选择器
- 常用的css选择器
- CSS选择器的常用规则
- 教程：设计中最常用的五类CSS选择器
- 设计中最常用的五类CSS选择器
- 设计中最常用的五类CSS选择器
- CSS中常用选择器及权重计算
- css中选择器的使用
- css中选择器的优先级
- css中常见的选择器
- css中基本的选择器
- [深度学习论文笔记][总结]Invariant gait feature extraction based on image transformation
- Solr集群设计思想
- 面试题---day01
- Ubuntu16.04安装32位支持库
- sprintf函数的用法
- CSS中常用的选择器
- 交互设计新手入职前的准备
- mysql查看当前运行中或挂起的sql
- jsp文件中获取项目真实路径
- Hdu 6000 Wash（贪心）
- jquery 根据数据库值设置radio的选中
- Python3 深浅拷贝
- 从子 Activity 获取返回结果
- Atom代码编辑软件炫酷效果插件activate-power-mode安装方法
