CSS选择器

最新推荐文章于 2022-04-04 17:59:44 发布

叫我邱球球

最新推荐文章于 2022-04-04 17:59:44 发布

阅读量251

点赞数

分类专栏：有关CSS 文章标签：心得前端博客 css 选择器

本文链接：https://blog.csdn.net/CallMeQiuqiuqiu/article/details/58076209

版权

有关CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

学习CSS就必须得学习选择器。那么什么是选择器呢？

其实之前就已经在博客里说过。每一条CSS样式声明都由两部分组成，形式如下

选择器{

样式;

}

在{}之前的那一部分就是所谓的选择器。“选择器”指明了{}中的样式所作用的对象，也就是样式作用于网页中的哪些元素。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        p{
            font-family: 黑体;
            color:red;
        }
    </style>
</head>
<body>
        <p >泥萌好</p>
</body>
</html>

其中，p就是选择器。

---------------------------------------------------分割线--------------------------------------------------------

标签选择器很简单，它其实就是HTML代码中的标签。例如<h1><p><h2><img>

---------------------------------------------------分割线--------------------------------------------------------

类选择器：

类选择器在css样式编码中是最常用到的。

类选择器的语法格式为：

.类选择器名称{

css样式代码;

}

使用类选择器的注意点：

1.是以英文圆点.开头

2.类选择器的命名规则应当符合普通变量的命名规则。

使用方法为：

①使用合适的标签将所要修饰的内容标记起来。

②为标签增加一个类class=""

③设置类选择器的css样式。

---------------------------------------------------分割线--------------------------------------------------------

ID选择器：

ID选择器和类选择器有一些相同点，也有一些不同点。

1.为标签设置id="ID名称"

2.ID选择器前面是（#），class选择器前面是（.）

相同点：可以应用于任何元素

不同点：

①ID选择器在文档中只能使用一次，而class选择器却可以使用很多次。

②class选择器可以有两个甚至更多的名称，而ID选择器只允许拥有一个

---------------------------------------------------分割线--------------------------------------------------------

子选择器：

用大于号>，用于选择指定标签元素的第一代子元素。

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        p{
            font-family: 黑体;
            color:red;
        }
        .first>li{
            color:lawngreen;
        }
    </style>
</head>
<body>
        <p >泥萌好</p>
        <ul class="first">
            <li>
                <p>Please Call Me Qiuqiuqiu</p>
            </li>
            <li>
                <ul>
                    <li>CSDN博客</li>
                </ul>
            </li>
            <li>
                <p>Thank U</p>
            </li>
        </ul>
</body>
</html>

-------------------------------------------------分割线---------------------------------------------------

后代选择器：

后代选择器是加入了空格，用于选择指定标签的后代元素。这个选择器和子代选择器的使用还是有区别的。

>作用于元素的第一代后代，而空格是作用于所有后代。

例如：

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>后代选择器</title>
    <style type="text/css">
        .food>li{
            border:1px solid red;/*添加边框样式（粗细为1px， 颜色为红色的实线）*/
        }
    </style>
</head>
<body>
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>卷心菜</li>
        </ul>
    </li>
</ul>

</body>
</html>

第七行是大于号时的效果为：

如果把大于号换做是空格，变成后代选择器，则效果为：

---------------------------------------------------分割线--------------------------------------------------------

叫我邱球球

关注

0
点赞
踩
0

收藏

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

学习CSS就必须得学习选择器。那么什么是选择器呢？其实之前就已经在博客里说过。每一条CSS样式声明都由两部分组成，形式如下选择器{样式;}在{}之前的那一部分就是所谓的选择器。“选择器”指明了{}中的样式所作用的对象，也就是样式作用于网页中的哪些元素。例如：后代选择器 p{ font-family
复制链接

扫一扫