css文件——css的选择器—编号1

2024-02-16 13:15:34

css选择器

1、标签、类名、id 的选择器

1.1标签选择器

标签·： div {width：100px}

也可以同时对多个html标签（或者 class名、id名）

h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}

通配符可以选中全部的元素

通配符”*”： * { font-size: 20px;}

1.2类选择器

需要在标签中声明一个class属性

<p class="deadline">...</p>
<h2 class="deadline">...</h2>
这样我们就可以用以下方式使用类选择器了：
p标签行的： p .deadline { color: red;}
h2标签行的：h2 .deadline { color: red;}
//====================================
点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：
.deadline { color: red;}

一个元素可以有对个类名一个类名也可以对应多个元素

<div class="a1 a2 a3"></div>
<div class="a1 a2"></div>
.a1,.a2,.a3{
	width:100px;
}

id选择器

ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：

<p id="top-para">...</p>
<p id="foot-para">...</p>

使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如：
#top-para {} #foot-para {}；
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。

2、属性选择器

css选择器网址

设置表单时 使用的属性选择器
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：

(1)简单属性选择器

简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 [属性名]。比如我们希望选择带有alt属性的所有img元素： img[alt] { …}
//--------------------------------------------------------------------------------------------------------------------
选择带有title属性的所有元素：[title] { …}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：
a[href][title] { …}
组合使用类选择器使我们的选择更加富于灵活

3、派生选择器（上下文选择器）

上下文选择器

后代选择器

在当前收个元素下的所有的同名元素
例子

<div class="a1">
	<div class="a2">
		<div class="a3"></div>
		<div class="a3"></div>
		<div class="a3"></div>
	</div>
</div>
.a1{
	.a2{
	}
	.a3{
		a1下所有class为a3的标签
	}
}

（>）子元素选择器

只会选择当前元素下的子元素

<div class="box">
    <p>变色</p>
    <p>变色</p>
    <div>
    <p>不变</p>
    <p id="aa">不变</p>
    </div>    
</div>
css样式
.box>p{  background: #aaf;}

（+）相邻兄弟选择器

选择紧连着另一元素后的元素，二者具有相同的父元素。只会选择的一个相邻的匹配元素

<div class="box">
    <h1>它的兄弟变色</h1>
    <h2>变色</h2>
    <h2>23333333333333333……</h2>
    <div>
    <p>不变</p>
    <p id="aa">不变</p>
    </div>    
</div>
CSS
h1+h2{   background: #aaf;  }

（~）后续兄弟选择器

选取所有指定元素之后的相邻兄弟元素

与相邻兄弟元素选择器 相比，
相邻兄弟元素选择器 只是选择紧跟着的兄弟元素，
后续元素选择器  选择所有符合条件的兄弟元素
实例：（选取h1元素后的所有，相邻的兄弟元素h2元素）

<div>
    <h1>与他复合条件的兄弟</h1>
    <h2>变色</h2>
    <p>wwwwwwwwwwww</p>
    <h2>变色</h2>
<div>
h1~h2{   background: #aaf;   }

码农公寓