css选择器

css的基本样式

---

CSS 规则由两个主要的部分构成：

选择器 ，以及 一条或多条声明 。

selector {declaration1; declaration2; ... declarationN }

选择器 通常是您需要改变样式的 HTML 元素。

属性 是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。

<style>

#change{

color: blueviolet;

}

</style>

---

标签选择器

---

作用与当前页面所有的li标签

<style>

li{

color: #fc83ff;

font-size: 25px;

font-family: "Angsana New";

}

</style>

<ul>

<li>理学院</li>

<li>计算机学院</li>

<li>外国语学院</li>

<li>汽车学院</li>

<li>机械学院</li>

<li>管理学院</li>

<li>通信学院</li>

</ul>

<ul>

<li>工学院</li>

<li>计算机学院</li>

<li>外国语学院</li>

<li>法学院</li>

<li>数学院</li>

<li>管理学院</li>

<li>国防生学院</li>

</ul>

---

ID选择器

---

给当前页面指定的id元素添加样式

一个页面可以有多个id选择器，但只能有名字相同的一个id

<style>

#change{

color: blueviolet;

font-family: AngsanaUPC;

}

</style>

<ul>

<li id="change">理学院</li>

<li>计算机学院</li>

<li>外国语学院</li>

<li>汽车学院</li>

<li>机械学院</li>

<li>管理学院</li>

<li>通信学院</li>

</ul>

---

类选择器

---

给当前页面某一类标签添加样式

同一个页面，可以存在多个同名的类

<style>

.change{

color: red;

}

</style>

<ul>

<li class="change">理学院</li>

<li>计算机学院</li>

<li class="change">外国语学院</li>

<li>汽车学院</li>

<li class="change">机械学院</li>

<li>管理学院</li>

<li class="change">通信学院</li>

</ul>

---

后代选择器

---

一种多个用空格分隔的选择器

后代选择器可以选择作为某元素后代的元素

<style>

li{

color: yellow;

}

#second li{

color: red;

}

</style>

<!-- 后代选择器-->

<ul id="first">

<li>烟台大学</li>

<li> 鲁东大学</li>

<li>山东工商学院</li>

</ul>

<ul id="second">

< li>青岛理工大学</li>

<li>山东科技大学</li>

<li>中国石油大学</li>

</ul>

<ul id="third">

<li>青岛理工大学2</li>

<li>山东科技大学2</li>

<li>中国石油大学2</li>

</ul>

---

子代选择器

---

与后代选择器相比，

子元素选择器只能选择某元素子元素的元素。

<style>

/* 子代选择器*/

h1 > strong{

color: red;

}

h1 strong{

color: red;

}

</style>

< h1>This is < strong>very</strong> < strong>very</strong>important. <br>

This is <em>really<strong>very</strong></em> important.

</h1>

---

相邻选择器

---

可选择紧接在另一元素后的元素，且二者有相同父元素。

<style>

h1 + p{

color: red;

}

</style>

< h1>bjkllkjalkaljgla</h1>

< p>dfmfgsaaf</p>

<p>FDSFNDSFH</p>

<p>ahfHSBFDH</p>

<p>bsdhsassh</p>

<p>bssahabas</p>

<p>jjkavajkd</p>

---

伪类选择器

---

用于向某些选择器添加特殊的效果，

其样式是【：nth-child（）或：hover】

<style>

/* 伪类选择器*/

/* 让第2n行变色*/

li :nth-child(2n){

color: red;

}

/* 只让第1行变色*/

li :first-child{

color: red;

}

/* 只让最后一行变色*/

li :last-child{

color:blue;

}

/* hover:悬浮 实现当鼠标放在哪一行时，哪一行变色*/

li:hover{

color: red

}

li:nth-child(2n):hover{

color: red;

}

li:nth-child(2n-1):hover{

color: blue;

}

</style>

<ul>

<li>烟台大学</li>

<li>山东工商学院</li>

<li>鲁东大学</li>

<li>青岛大学</li>

<li>山东科技大学</li>

<li>青岛理工大学</li>

</ul>

---

通配符选择器

---

通配符使用 星号* 表示，意思是“所有的”。

<style>

/* 通配符选择器*/

/* 消除所有元素的内外边距*/

*{

padding: 0;

margin: 0;

}

#div1{

height: 200px;

background-color: #42668F;

margin-left: 20px;

}

/* 消除列表的圆点*/

li{

list-style: none;

}

</style>

<div id="div1">

<ul>

<li>hhla</li>

<li>sgas</li>

<li>vdgs</li>

</ul>

</div>