CSS选择器

标签选择器

例如:`p`、`a`、`h[1,6]`、`span`、`div`、、、

类选择器(class)

class 选择器以 "." 来定义。 如:.id1{样式属性:值;}
命名尽量别用下划线,会出现兼容问题,下划线一般用于JS里,也不要用纯数字或者中文名
例如:
      <div class="class1"></div>
注意:
      类选择器还包括多类名选择器 <div class="class1 class2.."></div>

ID选择器

id 选择器以 "#" 来定义。 如:#id1{样式属性:值;}
命名方式如类选择器
例如:
      <div id="id1"></div>

类选择器和ID选择器的区别

二者的主要区别在哪里呢?(使用次数)

id只能用来定义单一元素,定义二个以后。页面不会出现什么问题,但是W3检测的时候认为你页面不符合标准;
class是类,同一个class可以定义多个元素。就页面效果而言,两个东西的视觉效果几乎无差别。

id 选择符为什么要少用,它有有什么局限性

单一使用的样式用id,需要程序、js动态控制的样式用id,id在页面只能使用一次!
提供少用id,因为id可能和页面嵌的程序冲突(比如名称相同等)!

该在什么时候使用ID,什么时候使用class?

单一的元素,或需要程序、JS控制的东西,需要用id定义;重复使用的元素、类别,用class定义。

通配符选择器

*{样式属性:值;}

伪类选择器

链接伪类选择器 (主要针对于a标签 可以没有但是顺序不能颠倒)

:link  /*未访问的链接*/

:visited  /*已访问的链接*/

:hover  /*鼠标移动到链接上*/     最常用的链接伪类选择器

:active  /*选定的链接 别松开的状态*/

结构(位置)伪类选择器CSS3 (第几个孩子的那种选择器)

:first-child   选取属于其父元素的首个子元素的指定选择器
:last-child   选取属于其父元素的最后一个子元素的指定选择器
:nth-child(N)  匹配属于其父元素的第N个子元素的每个元素,不论元素的类型,从最后一个子元素开始计数。N可以是数字,关键词或公式
​      关键字 :odd是奇数  even是偶数
​      表达式: 2n偶数  2n+1奇数n为倍数
:nth-last-child()是从最后一个子元素开始数  默认是首元素

目标伪类选择器

:target目标伪类选择器  选择器可用于选取当前活动的目标元素

复合选择器

交集选择器

由两个选择器构成,第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,如p.boxone{},读作类名为boxone的段落标签

并集选择器

当各个选择器的样式完全相同或者部分时,就可以采用并集选择器。如.one,.two,.h1{ 相同样式 }
只要逗号隔开的,所有选择器都会执行后面样式

后代选择器

又称为包含选择器,用来选择元素或者元素组的后代。
写法:将外层标签写在前面,内层标签写在后面,中间用空格隔开,当标签发生嵌套时,内层标签就成为外层标签的后代。如div p{ 样式 }
.box p{ }的意思就是使用.box类选择器的子元素中,所有包含p标签的采用此样式。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。
写法:
父级在前,子集在后,中间用 > 连接,注:> 两边各要有一个空格,不包含孙子,子孙集,只是儿子集不用 > 则可以选择所有后代

属性选择器

选取标签带有某些特殊属性的选择器可以使用属性选择器
写法:a[title] {} 属性选择器中庸中括号来表示
div[class^=font] { } 以font开始的
div[class$=font] { } 以font结束的
div[class*=tao] { } 表示tao在任意位置都可以

伪元素选择器(CSS3)

.dome  类选择器
:first-child  伪类选择器
::first-letter 伪元素选择器
E::first-letter  文本的第一个单词或字
E::first-line  文本第一行
E::selection  可改变选中文本的样式(鼠标)
E::before{ content:"文字" }  盒子内部前面(加字体)
E::after{ content:"文字" }  盒子内部后面(加字体)
(0)

相关推荐

  • 小白入门你教程CSS选择器

    CSS越来越重要是大家中所周之的,但是还有很多人不知道CSS有哪些基本选择器和高级选择器?下面我们来总结一下. CSS有哪些基本选择器和高级选择器? ID选择器>类选择器>标签选择器 行内 ...

  • css选择器有哪些, 选择器的权重优先级

    特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.--< ...

  • css 选择器

    CSS 选择器 一.常用选择器 元素选择器 p {} id 选择器 #name {} class 类选择器 .box {} 二.复合选择器 交集选择器 p.red {}.box.red {} 选中同时 ...

  • CSS——选择器(三大特性)

    一.继承性 1.基本介绍 #1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性 #2.注意: 1.只有以color.font-.text-.line-开头的属性才可以继 ...

  • CSS选择器区别

    "竞争永远只有一个冠军,但我们依然可以选择做自己的盖世英雄.赶快披上漂亮的CSS外衣,好好表现自己一番吧." --有心人做有心事哦,晚安EmilyChen! (一)单一 [1]属性 ...

  • 前端css选择器

    从零开始的前端生活--css基础 选择器 选择器是用来选择对应的html元素. 类选择器 以" . "为开头的选择器,很多元素可以共用同一个类选择器 ID选择器 以" # ...

  • CSS选择器的优先级

    常用 CSS选择器 查看地址(https://www.cnblogs.com/hleisurely/p/12836777.html) 1.选择器的优先级 !important的优先级别最高 权重值为1 ...

  • [css] 第113天 标签、class和id选择器三者的区别是什么?分别在什么时候用?

    今日试题: 标签.class和id选择器三者的区别是什么?分别在什么时候用? 此开源项目四大宗旨:勤思考,多动手,善总结,能坚持 <论语>,曾子曰:"吾日三省吾身"(我 ...

  • 【11】css 基本功:引入方式及选择器相关

    vue 组件开发,必须熟悉基本的 css 知识及技巧. 目录 1.原生 css 的三种引用方式 2.组件开发中的选择器 2.1.深度作用选择器 2.2.不使用类型选择器 3.css 选择器 1.原生 ...