CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

元素居中对齐

.center {

    margin: auto;

    width: 50%;

    border: 3px solid green;

    padding: 10px;

}

文本居中对齐

.center {

    text-align: center;

    border: 3px solid green;

}

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

图片居中对齐

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

左右对齐——position定位

左右对齐——float

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

垂直居中对齐

组合选择符

　　　　后代选择器(以空格分隔)

```
div p

{

  background-color:yellow;

}
```

子元素选择器(以大于号分隔）

```
div>p

{

  background-color:yellow;

}
```

相邻兄弟选择器（以加号分隔）houxu

```
div+p

{

  background-color:yellow;

}
```

后续兄弟选择器（以破折号分隔）

```
div~p

{

  background-color:yellow;

}
```

伪类

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

a:link {color:#FF0000;} /* 未访问的链接 */

a:visited {color:#00FF00;} /* 已访问的链接 */

a:hover {color:#FF00FF;} /* 鼠标划过链接 */

a:active {color:#0000FF;} /* 已选中的链接 */

可以和css类配合使用

:first-child伪类【选择父元素的第一个子元素】

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

所有<p>元素中的第一个<i>元素

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

所有作为第一个子元素的<p>中的所有<i>元素

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单

:lang 伪类【为不同的语言定义特殊的规则】

<style>

q:lang(no)

{

    quotes: "++++" "++++";

}

</style>

</head>

<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>

<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>

CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单