css选择器

最新推荐文章于 2022-05-26 22:25:47 发布

前端小白-lulu

最新推荐文章于 2022-05-26 22:25:47 发布

阅读量179

点赞数

分类专栏： css 选择器

本文链接：https://blog.csdn.net/weixin_42771133/article/details/81195401

版权

css 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

选择器

1 篇文章 0 订阅

订阅专栏

css选择器：

一、基础选择器

1、通用选择器：

语法：*{}

作用：匹配页面中所有的元素，可用于页面上所有元素的样式定义

使用场合：用于设置一些默认样式

*{font-size:12px;}//设置整个文档的文字大小为12像素；

2、id选择器：

语法：#id值{} #仅表示该选择器是id选择器而已

作用：专属定制，只匹配页面上制定id值的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>	
<style>
    #contain{
        width:100px;
        height:100px;
        background:#000;
    }
</style>
</head>
<body>	
    <div id="contain"></div>
</body>	
</html>

3、元素选择器

别名：标签选择器，标签样式...（html文档的元素就是选择器，如：<p></p>,<span></span>......）;

语法：元素名称{}

作用：匹配页面中指定元素的所有标记，设置页面上某一类（种）元素的样式

ex：设置body中文字大小为12px

body{font-size:12px;}

4、类选择器

语法：.className{};

注意：. 在声明时不能省略。.是定义类选择器的语法规范，并不是类选择器的名称。

className（类名）：可以是字母，数字，下划线（_），连字符（-），不能以数字开头，不能包含特殊字符（%，￥，$......）

引用：<Any class="className">//Any代表任意标签

多类选择器的“”引用方式“”：<ANY class="class1 class2 class3....">

5、群组选择器

语法：选择器1, 选择器2,........{}

特点：选择器的声明是一个以，隔开的选择器列表

作用：将多个样式效果相同的选择器，放在一起定义

6、后代选择器（包含选择器）

后代：不限制层级的子/孙子元素们都是后代，依据元素在其位置的上下文关系来定义样式

用于选择作为某元素后代的元素，----选择器一端包括两个或多个用空格分隔的选择器

语法：选择器1 选择器2{…..}

7、子代选择器

语法：选择器1>选择器2{}

子代：只有一级层级关系的子元素是子代，只能存在父子关系

子代选择器的效率比后代选择器高

8、伪类选择器

①链接伪类（用于超链接）

：link 匹配未被访问的超链接的状态

：visited 适用于访问过的链接

②动态伪类

：hover 匹配鼠标悬停在元素上的状态

：active 匹配元素被激活时的状态

：focus 匹配元素获取焦点时的状态

二、复杂选择器

1、兄弟选择器

兄弟元素：具备相同父元素的平级元素

①相邻兄弟选择器

作用：获取某元素后紧紧挨着它的指定元素

注意：兄弟选择器只能向后找，不能向前找

语法：选择器1+选择器2{}

<body>
    <div id="d1"></div> 
    <div id="d2"></div>  <!--d2是d1的相邻兄弟-->
    <div id="d3"></div>  <!--d3是d2的相邻兄弟-->
</body>

#d1+div{
    color:red;//匹配出来的是#d2,所以只有d2的样式改变；
}

②通用兄弟选择器

作用：匹配某元素后所有的满足条件的兄弟元素

语法：选择器1~选择器2

2、属性选择器

作用：允许使用元素的属性及其值，来匹配页面元素

①、[attr] attr表示任意的属性名称

作用：匹配附带attr属性的元素

ex：[title] 匹配有title属性的元素

②、elem[attr] elem:表示页面中任意元素

作用：匹配页面中所有附带attr属性的elem元素

③、[attr1][attr2]

作用：匹配同时附带多个属性的元素

④、[attr=value]

作用：匹配attr属性值为value的元素

value:可以表示任意的属性值

⑤、[class ~ = value]

匹配class的属性值，是一个值列表，并且value是该列表中的一个独立选择器的元素

⑥、[attr ^= value]

匹配attr属性值是以value字符作为开始的元素

⑦、[attr $= value]

匹配 attr 属性值是以 value 字符作为结尾的元素

⑧、[attr *= value ]

匹配attr属性值中包含value字符的元素

3、伪类选择器

①.目标伪类

作用：突出显示活动的HTML锚点元素，匹配被激活的锚点

语法： selector：target

②.结构伪类

作用：通过元素的结构匹配元素

：first-child 匹配属于其父元素中的首个子元素

: last-child 匹配属于其父元素中的最后一个子元素

：nth-child(n) 匹配属于其父元素中的第n个子元素（下标从1开始）

：nth-child(2)匹配属于其父元素中的第2个子元素

div:nth-child(1)<==>div:first-child

:empty 匹配没有子元素的元素(无子元素，无文本，无回车或空格)

：only-child 匹配属于其父元素的唯一子元素

③.否定伪类

作用：将指定选择器匹配上的元素排除出去

语法： ：not(selector)

ex：
tr:not(:first-child){font-style:italic;}除第一行以外所有行的字体为斜体

4、伪元素选择器

1. :first-letter 或 ::first-letter 匹配指定元素的首字符

2. :first-line 或 ::first-line 匹配指定元素的首行

3. ::selection 匹配被用户选取的内容部分

注意：只能修改文本颜色和背景颜色

选择器的优先级

选择器的权值加到一起，大的优先；如果权值相同，后定义的优先（群组选择器权值不累加）；

权值：

元素选择器：1

类选择器：10

伪类选择器：10

ID选择器：100

内联样式：1000

前端小白-lulu

关注

0
点赞
踩
0

收藏

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

css选择器：一、基础选择器 1、通用选择器：语法：*{} 作用：匹配页面中所有的元素，可用于页面上所有元素的样式定义使用场合：用于设置一些默认样式 *{font-size:12px;}//设置整个文档的文字大小为12像素； 2、id...
复制链接

扫一扫