1500字范文 > css选择器+> css派生选择器有几种 – CSS – 前端 css3 dark

css选择器+> css派生选择器有几种 – CSS – 前端 css3 dark

时间：2020-10-13 05:36:34

1.标签选择器：直接用元素的标签来进行选择

span { // 直接选择span标签

size:16px;

}

2.ID选择器：通过设置id名字，进行精确的选择，用#来定义

# div1 { //通过id名字来进行选择

color:red;

}

3.类选择器:通过类名来进行选择，选择范围比id选择器大，用’.来定义

.div1 { //所有类名为div1的都被选择了

color:red;

}

4.通配符选择器：范围更大，作用于所有标签，用*来定义

不建议使用，对页面加载负担大

高级选择器

1.后代选择器：定义用空格隔开

div span { //选择的是div标签下的span标签，当然后代顾名思义可以不止隔一代，可以隔多代进行选择

color：red；

}

2.交集选择器：与后代选择器定义的不同是，没有空格隔开，两个元素紧挨着

span#a1 { //选择的是两个条件1.既是span标签的 2.id名是a1的元素，两个条件缺一不可

color：red；

}

3.并集选择器：定义用逗号隔开

span，#a1 { //选择的是1.是span标签的 2.id名是a1的元素，两个条件满足一个即可

color：red；

}

4.伪类选择器：

1.静态伪类：点击连接之前（link），点击连接之后(visited)这样的

2.动态伪类：鼠标移入（hover），点击之后（focus）

，css派生选择器有几种”>

@ 解析css中的选择符命名？

基本上这些命名都符合标识符的命名规则1、必须由字母、数字、下划线和美元符号组成2、首字母必须是字母或下划线3、建议采用驼峰式命名如：newCont，从第二个单词开始首字母大写

@ 表示样式类选择器的代码是？

1：标签选择器

标签选择器，是所有带有某种标签的都生效。这里以p为例，也就是所有的带有p标记的都会这样的样式

复制代码

代码如下:

<html><head><styletype="text/css">p{font:"宋体"; color:#FF0000}</style></head><body><pid="p1">偶现在表现的是标签选择器</p><pid="p2">偶也用的是标签选择器</p><h1>偶没有被任何的选择器修饰</h1></body></html>

2：id选择器，注意id选择器是唯一的，因为只有id="yy"的才有这种样式，而一个页面里元素的Id必须是唯一的，所以。。。你懂得id选择器以#开头用法是：id=""

复制代码

代码如下:

<html><head><styletype="text/css">#yy{font:"宋体"; color:#FF0000}</style></head><body><pid="yy">偶现在表现的是id选择器</p><pid="p">偶没有被id选择器修饰</p><h1>偶没有被任何的选择器修饰</h1></body></html>

3：类选择器，类选择器以.开头只要把元素的class="" 就能表现为这种样式了用法是：class=""

复制代码

代码如下:

<html><head><styletype="text/css">.yy{font:"宋体"; color:#FF0000}</style></head><body><pclass="yy">偶现在表现的是类选择器</p><pclass="yy">偶没有被类选择器修饰</p><h1>偶没有被任何的选择器修饰</h1></body></html>