CSS選擇器和其他選擇器

2021-10-21 19:55:07 字數 2727 閱讀 6981

lang

="en"

>

>

charset

="utf-8"

>

>

選擇器title

>

>

/*ctrl+shift+/*/

/*群組選擇器:*/

#box,.color,span

/*選中ol標籤裡的li標籤*/

#ol li

#ul .red

/*直接子元素選中*/

#box2 > div

/*相鄰兄弟*/

span + p

/*普通兄弟*/

span ~ p

style

>

head

>

>

"box"

>

boxdiv

>

"box2"

>

box2 父級div

>

子元素div

>

孫子元素div

div>

div>

div>

>

spanspan

>

href

="#"

>

aa>

class

="color"

>

p1p>

>

p2p>

"ul"

>

>

ul1li

>

class

="red"

>

ul2li

>

>

ul3li

>

ul>

>

>

ul1li

>

class

="red"

>

ul2li

>

>

ul3li

>

ul>

"ol"

>

>

ol1li

>

class

="red"

>

ol2li

>

>

ol3li

>

ol>

body

>

html

>

熟練使用導航欄,對於任何**都非常重要。

使用css你可以轉換成好看的導航欄而不是枯燥的html選單。

作為標準的html基礎乙個導航欄是必須的

。在我們的例子中我們將建立乙個標準的html列表導航欄。

導航條基本上是乙個鏈結列表,所以使用

/*案例*/

>

>

href

="#home"

>

主頁a>

li>

>

href

="#news"

>

新聞a>

li>

>

href

="#contact"

>

聯絡a>

li>

>

href

="#about"

>

關於a>

li>

ul>

/*現在,讓我們從列表中刪除邊距和填充:*/

ul

例子解析:

上面的例子中的**是垂直和水平導航欄使用的標準**。

上面的**,我們只需要 元素的樣式,建立乙個垂直的導航欄:

a

示例說明:

注意:請務必指定 元素在垂直導航欄的的寬度。如果省略寬度,ie6可能產生意想不到的效果。

建立乙個簡單的垂直導航條例項,在滑鼠移動到選項時,修改背景顏色:

```html

```html

```html

ul

li a

/* 滑鼠移動到選項上修改背景顏色 */

li a:hover

什麼是 css float(浮動)?

ss 的 float(浮動),會使元素向左或向右移動,其周圍的元素也會重新排列。

float(浮動),往往是用於影象,但它在布局時一樣非常有用。

元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。

乙個浮動元素會盡量向左或向右移動,直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果影象是右浮動,下面的文字流將環繞在它左邊:

/*案例*/

img

如果你把幾個浮動的元素放到一起,如果有空間的話,它們將彼此相鄰。

.thumbnail 

## 清除浮動 - 使用 clear

元素浮動之後,周圍的元素會重新排列,為了避免這種情況,使用 clear 屬性。

clear 屬性指定元素兩側不能出現浮動元素。

/*案例*/

.text_line

CSS選擇器和其他選擇器及權重

作用 css選擇器主要用來對網頁中的元素進行設定樣式 css選擇器的規範寫法 標籤名作用 根據元素的class值進行選取元素 語法 classname作用 根據元素的id屬性值選取元素 語法 id作用 可以同時使用多個選擇器,這樣可以選擇同時滿足多個選擇器的元素。語法 選擇器1選擇器2作用 可以同時...

jquery選擇器和css選擇器

今天開發中碰到乙個問題。class maindiv class mydiv name id div class mydiv name id div class mydiv name id div class mydiv name id div div 是這樣,我獲取class mydiv 下面的某乙...

Css選擇器 層次選擇器(關係選擇器)

1.e f 匹配 e 元素下所有的子元素 f 後代選擇器 eg css.box a匹配 box 下所有的子元素 a 2.e f 匹配 e 元素下第一級子元素 f 子選擇器 eg css.box a匹配 box 下第一級子元素 a 3.e f 匹配 e 元素後面緊鄰的哪乙個 f 元素 有且僅有乙個 相...