Css中的选择器

Css选择器

• CSS代码用来修饰 HTML元素. 要用CSS代码设置样式, 首先要选中HTML元素.

• 用来选中 元素的 代码称为 选择器, 或 选择符.

• html元素是指, 标签与标签包裹内容的整体.

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大.

举例：

*{margin:0;padding:0}
div{color:red}   

<div>…</div> <!-- 对应以上两条样式 -->

<div class=“box”>…</div> <!-- 对应以上两条样式 -->

2、id选择器

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：

#box{color:red} 

<div id=“box”>…</div> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

class 选择器用于描述一组元素的样式,class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class=“red”>…</div>

<h1 class=“red big mt10”>…</h1>

<p class=“red mt10”>…</p>

4、后代选择器

后代选取器匹配所有当前元素的后代元素。 举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">

<span>…</span>

<a href="#" class="red">…</a>

</div>

<h3 class=“red”>…</h3>

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。也称为 并列选择

举例：

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class=“box1”>…</div>

<div class=“box2”>…</div>

<div class=“box3”>…</div>

6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}

<div class="box1">…</div>

a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在该元素上时 */

a:before{content:“Hello”;} /在每个<a>元素之前插入内容/

a:after{content:“world”;} /在每个<a>元素之后插入内容/

7.其他选择器(了解)

 .item>p{}                         子元素选择器:与后代选择器相比，子元素选择器只能选择某元素的子元素。 
 input[name=username]{}         属性选择器  :通过特定的属性来查找元素

 li:list-child{}                 选择最后一个li元素
 li:first-child{}                选择第一个li元素
 li:nth-child(2){}               选择指定的第几li元素

选择器之间的优先级别

    标签选择器           1

​    类选择器             10

​    ID选择器           100

​    行内样式         1000

​    伪类选择器          10

​    属性选择器          10

​    关系选择器     拆开后 权重值相加

注意:

​    1) 数值越大, 权重越高

​        2) 权重值相同的情况下, 后面的胜出