CSS选择器

最新推荐文章于 2024-04-17 23:37:40 发布

dk123sw

最新推荐文章于 2024-04-17 23:37:40 发布

阅读量293

点赞数

分类专栏： CSS 文章标签： CSS 选择器

本文链接：https://blog.csdn.net/dk123sw/article/details/79485355

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

（好吧，直接跑后面代码看注解来了解最简单）

选择器

类选择器（Class selectors）

通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。

在写样式表时，类选择器是以英文句号（.）开头的。

ID选择器（ID selectors）

通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。

在写样式表时，ID选择器是以#开头的。

伪类选择器（Pseudo-classes selectors）

CSS伪类（pseudo-class）是加在选择器后面的用来指定元素状态的关键字。比如，:hover 会在鼠标悬停在选中元素上时应用相应的样式。

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：

1. link、hover、active、visited

a:link（未访问的链接状态）,用于定义了常规的链接状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:active（在链接上按下鼠标时的状态）。

a:visited（已访问过的链接状态）,可以看出已经访问过的链接。

2. before、after

P:before 在每个<p>元素的内容之前插入内容;

P:after 在每个<p>元素的内容之后插入内容。

选择器优先级顺序

如果多于一个规则指定了相同的属性值都应用到一个元素上，CSS规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度, 而类选择器比标签选择器（tag selector）更具确定度。‘

如果样式中包含冲突的规则，且它们具有相同的确定度。那么，后出现的规则优先级高。

如果你遇到规则冲突，你可以增加其中一条的确定度或将之移到后面以使它具有更高优先级。

下面代码包括了绝大部分选择器类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style type="text/css">
        /*各种选择器使用测试*/
        /*'*'代表全选*/
        * {margin: 0 ;padding: 0}
        /*使用标签名定义样式*/
        strong { color: red; }
        /*使用'.'寻找class属性的值*/
        .carrot { color: orange; }
        /*使用'#'寻找id属性的值*/
        #first { font-style: italic;}
        /*利用标签名加其属性名更精确的查询*/
        div.pdiv {color: burlywood}
        /*测试优先级，在更准确的优先级会更高*/
        i#second_i1 {color: aqua}
        /*','用来链接各个名字*/
        #second_i1,#second_i2,#second_i3,#second_i4 {color: blueviolet}
        /*' ' 这里是空格代表从后代元素中查找*/
        body #second_i2 {color: chartreuse}
        /*'>' 此符号代表从子代(父子关系，注意和' '的区别)*/
        p>#second_i3 {color: darkgray}
        /*':first-child' 任一是其父母结点的第一个子节点的元素*/
        #third span:first-child {color: lightcoral}
        /*'+' 任意的下一个兄弟元素*/
        #third span:first-child + span {color: aquamarine}
        /*'~' 元素后面的拥有共同父元素的兄弟元素*/
        #third span ~ abbr {color: darkgoldenrod}
        /*利用[]中的属性匹配相应元素*/
        [style="color: lightcoral"] { background-color: aqua}
        /*基于关系的选择器和伪类选择器做出纯CSS无JavaScript的下拉菜单*/
        div.menu-bar ul ul {
            display: none;
        }
        div.menu-bar li:hover > ul {
            display: block;
        }
    </style>
</head>
<body>
<p id="first">
    <strong class="carrot">C</strong>ascading
    <strong class="spinach">S</strong>tyle
    <strong class="spinach">S</strong>heets
<div class="pdiv">测试p.div   选中div标签中属性'class'名为pdiv的元素</div>
</p>
<p id="second">
    <strong>C</strong>ascading
    <strong>S</strong>tyle
    <strong>S</strong>heets<br/>
    <i id="second_i1">测试 i#second_i1</i><br/>
    <i id="second_i2">测试body #second_i2</i><br/>
    <i id="second_i3">测试 p>#second_i3</i><br/>
    <i id="second_i4">测试','</i>
</p>
<p id="third">
    <span>测试#third span:first-child</span>
    <span>测试#third:first-child +span</span><br/>
    <abbr>测试#third span ~ abbr</abbr>
</p>
<p style="color: lightcoral">测试属性选择器</p>
<div class="menu-bar">
    <ul>
        <li>
            <a href="htmlname.html">Menu</a>
            <ul>
                <li>
                    <a href="htmlname.html">Link</a>
                </li>
                <li>
                    <a class="menu-nav" href="htmlname.html">Submenu</a>
                    <ul>
                        <li>
                            <a class="menu-nav" href="htmlname.html">Submenu</a>
                            <ul>
                                <li><a href="htmlname.html">Link</a></li>
                                <li><a href="htmlname.html">Link</a></li>
                                <li><a href="htmlname.html">Link</a></li>
                                <li><a href="htmlname.html">Link</a></li>
                            </ul>
                        </li>
                        <li><a href="htmlname.html">Link</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

dk123sw

关注

0
点赞
踩
0

收藏

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

（好吧，直接跑后面代码看注解来了解最简单）选择器类选择器（Class selectors）通过设置元素的 class 属性，可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时，类选择器是以英文句号（.）开头的。ID选择器（ID selectors）通过设置元素的 id 属性为该元素制定ID。ID名由开发者指定。每个ID在文档中必须是唯一的。在写样式表时，ID...
复制链接

扫一扫