CSS3——元素选择器

一、 新增属性选择器：

[att*=val]

如果元素用att表示的属性的值中包含用val指定的字符相同

[att^=val]

如果元素用att表示的属性的值的开头字符为val指定的字符相同

[att$=val]

如果元素用att表示的属性的值的结尾字符为val指定的字符相同

注意不只是id，任何属性均可使用
例如：

[align*=center]{
    background: green;
}

---

二、 伪类选择器和伪元素选择器

1.伪类选择器

可以根据动作选择

:link

鼠标点击前的样式

:visited

鼠标点击后的样式

: hover

鼠标悬浮时的样式

:active

鼠标点击中的样式

例如：

a:link{
    color: black;
}
a:visited{
    color: fuchsia;
}
a:hover{
    color: green;
}
a:active{
    color: #ff6600;
}

2.伪元素选择器

可用于标签中的内容

:first-line

选中内容第一行
例如：

p:first-line{
    color: #ff6600;
}

:first-letter

选中内容中的第一个字
例如：

p:first-letter{
    color: green;
    font-size: 24px;
}

:before

在内容前面追加其他内容
例如：

:before{
    content:".";
    color: aqua;
    /*这里的样式只用于content中的内容*/
}

:after

在内容后面追加其他内容
例如：

li:after{
    content: "!";
    color: aqua;
    /*这里的样式只用于content中的内容*/
}

---

三、 结构性伪类选择器

对网页整体（root和not）、逻辑（empty，target）

：root

整个页面的样式，注意与body进行区分
例如：

:root{
    background: aqua;
}

*:not()

写法：()中添加某标签名
除去()中的标签元素的其他元素
例如：

body *:not(h1){
    background: white;
}

:empty

选择空的元素
例如：

:empty{
    background:#ff6600;
}

:target

点击后，显示部分所显示的样式
例如：

:target{
background: black;
    color: #ff6600;
}

以下代码测试“：target”的使用：

<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<br>
<div id="A">
    <h2>标题</h2>
    <p>内容...</p>
</div>
<div id="B">
    <h2>标题</h2>
    <p>内容...</p>
</div>
<div id="C">
    <h2>标题</h2>
    <p>内容...</p>
</div>
<div id="D">
    <h2>标题</h2>
    <p>内容...</p>
</div>

---

UI元素伪类选择器：

:enabled

指定可选的元素的样式

:disabled

指定不可选的元素的样式

:checked

指定选中的元素的样式