css3基本选择器

来源：互联网发布：mac怎么装flash插件编辑：程序博客网时间：2024/05/31 06:22

属性选择器和模糊匹配

根据部分属性值选择：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：p[class~="important"] {color: red;} 如果忽略了波浪号，则说明需要完成完全值匹配。部分值属性选择器与点号类名记法的区别：该选择器等价于我们在类选择器中讨论过的点号类名记法。也就是说，p.important 和 p["important"] 应用到 HTML 文档时是等价的。那么，为什么还要有 "~=" 属性选择器呢？因为它能用于任何属性，而不只是 class。例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于 title 文档的部分属性选择器，只选择这些图片：img[title~="Figure"] {border: 1px solid gray;}这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。子串匹配属性选择器下面为您介绍一个更高级的选择器模块，它是 CSS2 完成之后发布的，其中包含了更多的部分值属性选择器。按照规范的说法，应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器，包括 IE7。下表是对这些选择器的简单总结：类型              描述------------------------------------------------------[abc^="def"]    选择 abc 属性值以 "def" 开头的所有元素[abc$="def"]   选择 abc 属性值以 "def" 结尾的所有元素[abc*="def"]    选择 abc 属性值中包含子串 "def" 的所有元素------------------------------------------------------可以想到，这些选择有很多用途。举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：a[href*="w3school.com.cn"] {color: red;}

结构性伪类选择器

p:first-line{    color:red; /*给p标签中第一行加样式*/ }p:first-letter {    color:red; /*给p标签中第一个字或字母加样式 */}li:before {    content:"--"; /*给每一个li标签之前插入内容    //或：text-indent:10px; 首行文本缩进10像素*/    font-size:10px;    color:gray;}  li:after {    content:"解释语"; /*给每一个li标签之后插入内容*/    font-size:10px;    color:gray; }

root、not、empty、target选择器

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>CSS3_选择器测试</title>    <style type="text/css">    :root {        background-color: lightgray;    }    /*如果使用了root，则body选择器只对内容区域起作用*/    body {         background-color: darkseagreen;    }    div *:not(h1) {        color: red;    }    table tr td:empty {        background-color: gray;    }    /*URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)*/    div:target {        background-color: darkorange;    }    </style></head><body>    <div>        <h2>h2标签</h2>        <h1>这是标题</h1>        <p>这是一个p标签</p>    </div>    <hr/>    <table border="1">        <tr>            <td>内容1</td>            <td>内容2</td>        </tr>        <tr>            <td></td>            <td>内容2</td>        </tr>        <tr>            <td>内容1</td>            <td></td>        </tr>    </table>    <hr/>    <!-- 锚 -->    <a href="#a1">菜单一</a>    <a href="#a2">菜单二</a>    <a href="#a3">菜单三</a>    <a href="#a4">菜单四</a>    <div id="a1">        <h1>菜单一</h1>        <p>内容一</p>    </div>    <div id="a2">        <h1>菜单二</h1>        <p>内容二</p>    </div>    <div id="a3">        <h1>菜单三</h1>        <p>内容三</p>    </div>    <div id="a4">        <h1>菜单四</h1>        <p>内容四</p>    </div></body></html>

效果图：

序号选择器

li:first-child { /*第一个*/    background-color: yellow;}li:last-child { /*最后一个*/    background-color: lightblue;}li:nth-child(3) { /*从前往后数*/    background-color: darkorange;}li:nth-last-child(3) { /*从后向前数*/    background-color: darkgray;}

li:nth-child(odd) { /*从前往后数奇数个*/    background-color: yellow;}li:nth-child(even) { /*从前往后数偶数个*/    background-color:darkgray;}li:nth-last-child(odd) { /*从后往前数奇数个*/    background-color: yellow;}li:nth-last-child(even) { /*从后往前数偶数个*/    background-color:darkgray;}

/*h2:nth-child(odd){ *//*计数的时候连同其同级元素计算在内*//*    background-color: yellowgreen;}*/h2:nth-of-type(odd) { /*只算h2标签*/    background-color: yellowgreen;}

li:nth-child(4n+1) { /*变量必须是n 且形式为an+b*/;    background-color: red;}li:nth-child(4n+2) {    background-color: orange;}li:nth-child(4n+3) {    background-color: yellow;}li:nth-child(4n+4) {    background-color: green;    margin-bottom: 10px;}

伪类选择器

:hover /*鼠标掠过*/:active /*鼠标按下后*/:focus /*获得焦点*/:disabled /*属性disabled="disabled"时*/:enabled /*属性disabled=“”时*/:read-only /*属性readonly=“readonly”时*/:checked {outline:2px solid green;} /*单选多选框选中后*/::selection /*使被选中的文本成为红色 ::selection{color:red;}  只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor、outline*/:invalid /*input:invalid{border:2px solid red;}  如果 input 元素中的值是非法的，设置样式为红色 */:valid /*input:valid{border:2px solid green;}  如果 input 元素中的值是合法的，设置样式为绿色 */:required /* input:required{background-color:yellow;}  如果 input 元素设置了 "required" 属性，设置其为黄色:*/:optional /*选择器在表单元素是可选项时设置指定样式  optional 选择器只适用于表单元素: input, select 和 textarea*/:in-range/out-of-range/*用来指定当元素的有效值被限定在一段范围之内的样式，例如：<input type="text" min="0" max="100">input[type='number']:in-range {    background-color: green;}input[type='number']:out-of-range {    background-color: red;}*/

兄弟选择器

div~p{ /*处在同一个父元素中，与div同级的下文所有p元素*/    background-color: yellow;}

0 0