CSS选择器总结

最新推荐文章于 2024-04-05 22:03:35 发布

啊短

最新推荐文章于 2024-04-05 22:03:35 发布

阅读量318

点赞数

分类专栏： CSS学习

本文链接：https://blog.csdn.net/aduan__/article/details/112511088

版权

CSS学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

元素选择器

直接通过元素去选择，简单直接但是面对复杂结构无法处理。

<style>
	
</style>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
		color:silver;
	}
	//选中了所有h2标签
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    
</body>

选择器分组

当我们需要多个元素拥有相同的属性的时候，我们可以将这些元素的选择器设置为一组，来共同设定。

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 , p , body , table , div{
		color:red;
	}
	//h1 , p , body , table , div将这些元素的字体颜色设置成red
    </style>
</head>
<body>
    <h1 class="one">我是一个标题</h1>
    <h2 class="one">我也是一个标题</h2>
    <p class="one">我是一个段落</p>
    <table border="1px">
        <option>我是一个表格</option>
        <tr>
            <th></th>
        </tr>
    </table>
    <div>我是一个div</div>
</body>

类选择器

1.普通类选择器

简单来说就是将一类元素设置相同的属性
用（ . + 类名）去设置元素属性

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one{
            color: brown;
            background-color: blue;
        }
        //这样就选中了class为one的所有元素
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    <h2 class="one">我也是一个标题</h2>
    <p class="one">我是一个段落</p>

</body>

2. 结合元素选择器如下

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p.one{
            color: cadetblue;
        }
    </style>
</head>
<body>

    <h1 class="one">我是一个标题</h1>
    <p class="one">我是一个段落</p>
</body>

p.one解释为其 class 属性值为 one 的所有段落，注意这里没有空格

3. 我们还可以将一个标签设置多个class去进行选择

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .one.tow.three{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <p class="one two">我第一个段落</p>
    <p class="one two three">我第二个段落</p>
    <p class="two three">我第三个段落</p>
</body>

如果我们只想将第二个p标签的样式改变，我们必须同时选中.one.two.three
如果我们单独写.one.two将会将第一个和第二个p都选择
如果我们单独写.two.three将会将第二个和第三个p都选择

这样选择器的书写格式：通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素

ID选择器

id是给特定的某个元素设置样式，id是唯一的，在HTML文档中id选择器只会被使用一次

id选择器不能结合使用

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #one{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <p id="one">我第一个段落</p>
</body>

属性选择器

根据元素的属性选择一类元素

[id]:具有id属性的元素
[id = "one"]:具有id属性并且属性为one的元素
[class = "one"]具有class属性并且仅等于one的元素
[class~="one"]:选择具有class属性的，并且class属性中有one的元素
[class^="o"]:选择具有class属性的，并且class属性中以o开头的元素
[class$="e"]:选择具有class属性的，并且class属性中以e结尾的元素
[class*="o"]:选择具有class属性的，并且class属性中包含o的元素

伪类选择器：

div class= "one
.one
格式: :伪类名称

选择伪类：

:first-child 该标签的父元素，的第一个孩子
:last-child 该标签的父元素，的最后一个孩子
:nth-child(num/odd/even) odd选择所有奇数 even选择所有偶数

状态伪类：

:link 未点击状态
:hover 鼠标悬停状态
:active 鼠标按下状态
:visited 点击之后状态

书写顺序：link ->visited ->hover ->active

伪元素选择器：

格式：::伪元素名称

::first-letter

 		
.span{
 	color:red;
}

:frist-letter{
     color:red;
}

<p>hello</p>
<p><span class:"frist-letter">h<span>ello</p>
//两者相互等价，伪元素选择器底层相当于给需要改动的元素添加span去更改样式
//所以添加的是inline为行内元素

综合练习

<!DOCTYPE html>
<html lang="en">

<head>
	<style>
        
    </style>
</head>

<body>
	<div class="t">
        <div class="done1"></div><!-- 1 -->
    </div>
    <div class="t">
        <div>
            <div class="done1"></div><!-- 2 -->
        </div>
    </div>
    <div class="done1"></div><!-- 3 -->
</body>

</html>

空格选择所有后代
’ > '选择直接子节点
’ + '选择紧邻的下一个兄弟节点

当我们想选中1、2、3时，选择器为：div.done1 既是div类名又叫done1的
当我们想选中1、2时，选择器为：div.t div.done1 选择的是类名为t的div的后代类名为done1的标签
当我们想选择1时，选择器为：div.t>div.done1 选择的是类名为t的div的子元素为done1的标签

啊短

关注

0
点赞
踩
0

收藏

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

元素选择器直接通过元素去选择，简单直接但是面对复杂结构无法处理。<style> </style><head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { color:silver; } //选中了所有h2标签 </style></head><bod
复制链接

扫一扫