CSS3——元素选择器

• • • 一 新增属性选择器
      • attval
      • attval
      • attval
    • 二 伪类选择器和伪元素选择器
      • 伪类选择器
        • link
        • visited
        • hover
        • active
      • 伪元素选择器
        • first-line
        • first-letter
        • before
        • after
    • 三 结构性伪类选择器
      • root
      • not
      • empty
      • target
    • UI元素伪类选择器
      • enabled
      • disabled
      • checked

一、 新增属性选择器：

[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: px;
}
           

: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

指定选中的元素的样式