CSS3选择器

野性酷女 2021-12-10 03:25 298阅读 0赞

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web

### 文章目录 ###

*  1.介绍
 *  2.选择器
 *   *  2.1 属性选择器
     *  2.2 伪类选择器
     *  2.3 伪元素选择器

# 1.介绍 #

1.现状

*  浏览器支持程度不够好，有些需要添加**私有前缀**
 *  移动端支持优于pc端
 *  应用广泛，不断改进中

2.应对策略

*  渐进增强（低版本能正常访问，高版本注重用户体验）；
 *  考虑用户群体；
 *  遵照产品方案。

3.参考手册：http://css.doyoe.com/

4.符号问题：\{\}，\*，？，\[\],|,||与正则的含义相同

# 2.选择器 #

CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。

*  属性选择器
 *  结构伪类选择器
 *  伪元素选择器

## 2.1 属性选择器 ##

1.标志是`[ ]`

2.匹配含义： ^：开头 ； $：结尾； \*：包含

3.格式举例：E\[title\] 选中页面的E元素，并且E存在 title 属性即可。

## 2.2 伪类选择器 ##

1.标志是 `:`

2.常见：如超链接中的“**l**o**v**e **ha**te”（:link、:visited、:hover、:active）

3.格式举例：

li：first-child//匹配其父的第1个子元素
    li：last-child
    li:nth-child(n)
    li:nth-child(2n)/*偶数*/
    li:nth-child(2n+1)
    li:nth-last-child(n)/*倒数第n个子元素*/
    li:nth-child(-n+5)/*前5个*/

4.对同级兄弟元素，把child改为of-type，（从本身算第一个，找**同种类型**，不用找爹和不同类型的）如：

5.两者区别，参考 https://www.cnblogs.com/xuan52rock/p/4416228.html

## 2.3 伪元素选择器 ##

*  标志是 `::`
 *  E::after、E::before配合content使用

span:before{ 
    	  content:"hyo";
    }

![在这里插入图片描述][20190715172819506.png_pic_center]

[20190715172819506.png_pic_center]: /images/20211209/4da04d42891043e68a45d818b5e2f34b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，298人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3选择器

*一、属性选择器** 语法：**E\[att\]\{sRules\}** 说明：用于选取带有指定属性的元素。代码： <style type="te...

太过爱你忘了你带给我的痛/ 2024年04月18日 18:20/ 0 赞/ 3 阅读

相关 CSS3选择器

selector of css3 Relationship Selectors E+F 下一个满足条件的兄弟元素节点 E~F 下一堆满足条件的兄弟元素节点 At

偏执的太偏执、/ 2022年10月31日 04:17/ 0 赞/ 115 阅读

相关 css3选择器

![bgcolor.jpg][] ![fontSize.jpg][] [前端必须掌握30个CSS3选择器][30_CSS3] [征服高级C

系统管理员/ 2022年09月24日 07:23/ 0 赞/ 190 阅读

相关 CSS3选择器

2 选择器 > 作用:选择页面上的某一个或某一类元素 2.1 基本选择器 2.1.1 标签选择器标签选择器会选择到页面上所有这个标签的元素 <h

青旅半醒/ 2022年09月09日 13:48/ 0 赞/ 218 阅读

相关 CSS3 选择器——属性选择器

上一切在《[CSS3选择器——基本选择器][CSS3]》中主要介绍了CSS3选择器的第一部分，这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CS

淡淡的烟草味﹌/ 2022年06月10日 05:24/ 0 赞/ 323 阅读

相关 CSS3 选择器——基本选择器

[CSS的选择器][CSS]，我想大家并不会陌生吧，因为天天在使用，但对于[CSS3的选择器][CSS]，要运用的灵活到位，我想对很多朋友还是一定的难度，特别是CSS3中的:n

我就是我/ 2022年06月10日 05:24/ 0 赞/ 345 阅读

相关 css3选择器

css3选择器参考手册：[http://www.runoob.com/cssref/css-selectors.html][http_www.runoob.com_cssref

系统管理员/ 2022年05月10日 10:18/ 0 赞/ 275 阅读

相关 CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） <tabl

阳光穿透心脏的1/2处/ 2022年01月30日 16:11/ 0 赞/ 246 阅读

相关 CSS3选择器

CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级

爱被打了一巴掌/ 2021年12月20日 01:04/ 0 赞/ 321 阅读

相关 CSS3选择器

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.介绍 2.选择器

野性酷女/ 2021年12月10日 03:25/ 0 赞/ 299 阅读