css3基本选择器

最新推荐文章于 2022-12-30 00:17:16 发布

kinglyjn

最新推荐文章于 2022-12-30 00:17:16 发布

阅读量455

点赞数

分类专栏： HTML&CSS 文章标签： css3

本文链接：https://blog.csdn.net/kinglyjn/article/details/53926819

版权

HTML&CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

属性选择器和模糊匹配

根据部分属性值选择：
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 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;
}

kinglyjn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3基本选择器

属性选择器和模糊匹配根据部分属性值选择：如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：p[class~="important"] {color: red;} 如果忽略了波浪号，则说明需要完成完全值匹配。部分值属性选择器与点号类名记法的区别：该选择器等价于我们在类选择器
复制链接

扫一扫