CSS 选择器

最新推荐文章于 2022-08-25 22:31:05 发布
最新推荐文章于 2022-08-25 22:31:05 发布
阅读量93 收藏
点赞数
原文链接：http://www.cnblogs.com/lszw/p/10577307.html
版权

CSS选择器种类很多，CSS选择器的作用是将CSS规则应用于HTML文档中特定的元素

选择任意元素

可以使用星号（*）来表示”任意元素“。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >任意选择器</ title >
     < style >
         *{  margin:8px;
             padding:8px;
             border:1px solid #E3722E;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网</ h2 >
< p >study hard, improve every day</ p >
</ body >
</ html >

类选择器

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

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

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >类选择器</ title >
     < style >
         .study {  margin:8px;
             padding:8px;
             border:1px solid #E3722E;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网</ h2 >
< p class = "study" >study hard, improve every day</ p >
</ body >
</ html >

ID选择器

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >ID选择器</ title >
     < style >
         #study {  margin:8px;
             padding:8px;
             border:1px solid #E3722E;
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网</ h2 >
< p id = "study" >study hard, improve every day</ p >
</ body >
</ html >

伪类选择器

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

伪类和伪元素（pseudo-elements）不仅可以让你为符合某种文档树结构的元素指定样式，还可以为符合某些外部条件的元素指定样式：浏览历史(比如是否访问过 (:visited)， 内容状态(如 :checked ), 鼠标位置 (如:hover). 完整列表参见 CSS3 Selectors working spec.

伪类选择器说明
:link未访问
:visited已访问
:active激活链接
:hover鼠标悬停
:focus有焦点
:first-child在一组兄弟元素中的第一个元素
:nth-child找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序
:nth-last-child和上面的一样， 只是它从结尾处反序计数
:nth-of-type选取氏兄弟元素中的指定一个
:first-of-type选择一组兄弟元素中其类型的第一个元素
:last-of-type一组兄弟元素中其类型的最后一个元素
:empty没有子元素的元素
:target代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配
:checked表示任何处于选中状态的单选、复选、多选
:enabled表示任何被启用的元素
:disabled表示任何被禁用的元素

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >伪类选择器</ title >
     < style >
         a{
             color:#000;
         }
         a:visited { 
             color:red
         }
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网</ h2 >
< p id = "study" >study hard, improve every day</ p >
< a href = "https://www.liyongzhen.com" target = "_blank" >去利永贞网学编程去，走起！</ a >
</ body >
</ html >

基于关系的选择器

CSS还有多种基于元素关系的选择器。通过它们你可以更精确的选择元素。

选择器选择的元素
A E元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
A > E元素A的任一子元素E(也就是直系后代)
E:first-child任一是其父母结点的第一个子节点的元素E
B + E元素B的任一下一个兄弟元素E
B ~ EB元素后面的拥有共同父元素的兄弟元素E

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >基于关系的选择器</ title >
     < style >
         td{
             border: 1px solid #777;
         }
         #data-table-1 td:first-child {color: red;}
         #data-table-1 td:first-child + td {color: blue;}
     </ style >
</ head >
< body >
< h1 >利永贞网</ h1 >
< h2 >学编程，上利永贞网</ h2 >
< table id = "data-table-1" >
  < tbody >
   < tr >
    < td >< strong >Prefix</ strong ></ td >
    < td >< code >0001</ code ></ td >
    < td >default</ td >
   </ tr >
  </ tbody >
</ table >
</ body >
</ html >

 

转载于:https://www.cnblogs.com/lszw/p/10577307.html

weixin_30815427
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS选择器
01-08
Web前端css3选择器 参考文档： https://man.ilovefishc.com/css3/ 一、基本选择器 选择器 类型 功能描述 * 通配选择器 选择文档中所有的html元素 E 元素选择器 选择指定的类型的html元素 id ID选择器 ...
CSS选择器的相关介绍
Fancy_vae的博客
07-05 151
我
【前端面试题】02—59道CSS面试题(附答案)
web前端开发
03-02 2663
CSS部分的面试题主要考察应试者对CSS基础概念模型的理解，例如文档流、盒模型、浮动、定位、选择器权重、样式继承等。很多应试者认为CSS很简单，没多少内容，面试就是面试 JavaScrip...
css基本知识
weixin_30291791的博客
11-11 268
1、CSS 简介 　　CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。 　　HTML 标签被设计为用于定义文档内容，也就是文档结构，为了增强代码的可读性，实现...
css选择器
总结前端开发中遇到的问题，分享前端知识
08-25 6286
通配选择器（Universal selector）作用：选中页面中的所有元素;元素选择器（Type selector）也叫类型选择器、标签选择器
css 选择器
qq_42638586的博客
04-10 1411
css选择器
CSS选择器优先级
热门推荐
qq_46133833的博客
04-30 5万+
CSS选择器优先级 （1）CSS选择器都有权重值，权重值越大优先级越高。 内联样式表的权重值最高，值为1000。 id选择器的权重值为100。 class选择器的权值为10。 类型（元素）选择器的优先级为1。 通配符选择器的优先级为0。 （2）当权值相等时，后定义的样式表要优于先定义的样式表。 （3）在同一组属性设置中表有**“!important"**规则的优先级最大。 后代选择器 CSS后代选择器指为某标签元素内的特定后代标签元素来定义其样式。在CSS后代选择器中，规则左边的选择器一端包含两个或多个
css选择器有哪些？
weixin_47450807的博客
04-04 1万+
一、写在前面 css选择器有很多，但是常用到的也就几个，今天总结一下。 二、具体选择器 2.1、id选择器 #myId {} 2.2、类选择器 .myClass {} 2.3、标签选择器 p,h1 {} 2.4、后代选择器 div h1 {} 2.5、子选择器 div>h1 {} 2.6、兄弟选择器(所有的兄弟) ul~h1 {} 2.7、相邻兄弟选择器 ul+h1 {} 2.8、属性选择器 li[name='sss'] {} 2.9、伪类选择器 h1:hover {} 2.10 h
CSS 选择器支持列表
09-25
CSS 选择器支持列表 CSS 选择器是 CSS 中的一个重要组成部分，它允许开发者根据特定的规则来选择和应用样式到 HTML 元素上。下面是 CSS 选择器支持列表的详细解释： ### 一、基本选择器 * `E`：选择所有 HTML ...
CSS教程之css选择器 、属性、值
10-30
本教程将深入探讨CSS选择器、属性以及值，帮助你更好地理解和应用CSS来美化你的网页。 首先，我们要了解CSS选择器。选择器是CSS的核心组成部分，它的主要作用是定位HTML文档中的特定元素，以便对这些元素应用样式。...
CSS选择器.pdf
10-09
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）
四大类CSS选择器的使用说明
01-31
### 四大类CSS选择器的使用说明 #### 一、基础选择器 **基础选择器**主要包括四种类型：标签（元素）选择器、类选择器、ID选择器以及通配符选择器。 1. **标签选择器**：用于选取文档中的特定HTML标签。例如： `...
渲染CSS选择器
09-27
最近在High Performance Web Sites blog看到一篇关于css选择器的文章《Simplifying CSS Selectors》，我英文太差，在翻译软件和朋友的帮助下稍微的看懂了一些，看本文需要谨慎，谨防被我误导，如果你英文强，能翻译...
CSS选择器学习攻略
09-24
理解并熟练掌握CSS选择器是创建高效、可维护的样式表的关键。以下是对CSS选择器的详细说明： 1. **基本选择器**： - `*` 通用元素选择器，用于选择页面上的所有元素。 - `E` 标签选择器，如`p`选择所有的段落元素...
CSS选择器.docx
最新发布
08-02
以下是对CSS选择器的详细介绍： 一、基本选择器 通用选择器（*）： 匹配HTML或XML文档中的所有元素。 例如：* { margin: 0; padding: 0; } 将所有元素的外边距和内边距设置为0。 元素（标签）选择器（E）： 通过...
驯服CSS选择器
12-01
《驯服CSS选择器》是由Nicole Sullivan撰写的一份PPT，主要探讨了优化CSS选择器以提升网页性能的关键策略。CSS文件的大小和HTTP请求数是影响CSS性能的两个核心因素，远比我们通常关注的回流(reflow)和渲染时间更重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值