全教育培训行业第三方平台平台就业机构
扫码试听
扫码试听
Q:2638333071
首页 > 行业动态 > > 2)常用的CSS选择器有哪些(常见css选择器有哪些)
行业动态 行业问答 课程问答 零基础学习 就业前景 技术干货

2)常用的CSS选择器有哪些(常见css选择器有哪些)

发布时间:4 周 前 栏目:行业动态 浏览:

1、2)常用的CSS选择器有哪些

标签选择器:通过标签名称来选取元素,例如 "p" 表示所有段落。

类选择器:通过类名来选取元素,使用 "." 符号来定义,例如 ".my-class" 表示所有具有 "my-class" 类名的元素。

ID 选择器:通过元素的 ID 名称来选取元素,使用 "#" 符号来定义,例如 "#my-id" 表示具有 "my-id" ID 名称的元素。

属性选择器:通过元素的属性来选取元素,例如 "[type=\'text\']" 表示所有 type 属性为 text 的元素。

伪类选择器:通过元素的状态或位置来选取元素,例如 ":hover" 表示鼠标悬停在元素上时的样式。

伪元素选择器:可以选取元素中某些部分的样式,例如 "::after" 表示在元素内容后添加一个伪元素。

后代选择器:选取指定父元素下的子孙元素,例如 "div p" 表示所有 div 元素下的所有段落元素。

相邻兄弟选择器:选取紧接在另一个元素后面的元素,例如 "h1 + p" 表示紧接在 h1 元素后面的第一个段落元素。

通用选择器:选取所有元素,使用 "" 符号来定义,例如 "" 表示所有元素都被选取。

2)常用的CSS选择器有哪些

2、谈谈CSS中的几种选择器


今天本文主要和大家谈谈CSS中的几种选择器 ,需要的朋友可以参考下,希望能帮助到大家。

1、通配符选择器通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素

/*设置当前页面中所有标签的颜色为红色*/* {color: red;
} 2、标签选择器

标签选择器就是选择当前页面中相同名字的标签

/*设置所有p标签的文字颜色为红色*/p {color: red;
} 3、ID选择器

id选择器使用"#"进行标识,后面紧跟id名

{:;
}这是标题

注意HTML标签中ID的属性值在一个页面中必须是唯一的(是W3C规范而不是硬性规则)。

ID选择器命名规范

只允许出现字母(大小写均可,严格区分) 、下划线、数字,也就是说,id=”Head”和 id=”head”不冲突

只允许以字母开头

命名没有长度限制,可以是1个字母,也可以是很多个,不过不建议太长

不允许出现标签名(不是硬性规定)

4、类选择器类选择器就是选取页面中所有标签的class属性值相同的一类标签,用.(点)表示

{:;
}这是标题1

这是标题2 一个标签可以包含多个类选择器,在class标签中用空格隔开。

.head {color: blue;
}.subHead {font-size: 50px;
}这是标题2 5、复合选择器

5.1、交集选择器交集选择器又称标签指定式选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格,如

h3.special /* 需要满足标签是h3同时拥有special类 */或

p#one /* 需要满足标签是p同时id为one */ 5.2、并集选择器

并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为它们定义相同的CSS样式

/*同时给标签h3与class为box的元素设置样式*/h3, .box {color: red;font-size: 14px;
} 5.3、后代选择器

后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代(后代不仅仅包括儿子,还包括子子孙孙)。

2)常用的CSS选择器有哪些

3、CSS通配符选择器详解

通配符使用星号*表示,意思是“所有的”。

基础知识

通配符使用星号*表示,意思是“所有的”。 平时使用电脑,比如要搜索C盘里所有的网页,可以使用 *.html来搜索,.html是网页的后缀名,*代表了所有网页的名称; 也就是使用 * 加后缀名,就可以在电脑中搜索文件。

在CSS中,同样使用 * 代表所有的标签或元素,它叫做通配符选择器。 比如:* { color : red; } 这里就把所有元素的字体设置为红色。 *会匹配所有的元素,因此针对所有元素的设置可以使用*来完成,用的最多的例子如下: *{margin:0px; padding:0px;} 这里是设置所有元素的外边距margin和内边距padding都为0。

停止使用通配符选择器

不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。

淘宝 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0; padding:0}

腾讯 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

新浪 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

也就是将需要统一设置的元素使用分组选择器一次性设置; 分组选择器的意思就是有相同设置的元素分为一组,使用逗号隔开,这样设置的样式就会对该组所有元素起作用。

给后代设置相同样式

*通配符选择器的另一个用法是,给某个元素的后代设置相同的样式,比如要给class="red”元素的后代设置粗体,让具有类red的后代元素的字体加粗, .red * { font-weight : bold; } 比如新建a.html,复制下面的源代码

html head style type="text/css" .red { color:red;} .red * { font-weight : bold; } /style /head body div div 长子div div 孙子div /div /div /div /body /html

效果如下

结论

那么,到底要不要使用通配符选择器呢? 之所以不使用*通配符选择器,主要是因为网页打开速度,也就是性能原因。 但是,对于性能,没有必要考虑的太多,只有当性能确实是个问题的时候,我们再优化也不晚。

这一点,对初学者十分重要,以前我写程序,总是考虑性能,结果是浪费了时间。现在我基本都是怎么快怎么来,任务是有期限的,我们必须要抓紧时间,先把功能实现,后面再想着优化。

因此,对于通配符选择器,只要你有需要,随时可以拿过来用。 不过,一般也就是使用这一句啊,*{margin:0px; padding:0px;}

4、详细说明css的常用选择器类型有哪些

css常用的四种选择器类型有:

标签选择器:针对一类标签

ID选择器:针对某一个特定的标签使用

类选择器:针对你想要的所有标签使用

后代选择器:用空格隔开

1、标签选择器:选择器的名字代表html页面上的标签

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。

举例:

p{

font-size:14px;

}

css

再比如说,想让“学完了安卓,继续学前端哟”这句话中的“前端”两个变为红色字体,那么可以用标签把“前端”这两个字围起来,然后给标签加一个标签选择器。

代码如下:

Document

span{

color: red;

}

学完了安卓,继续学前端哟

【总结】需要注意的是:

(1)所有的标签,都可以是选择器。比如ul、li、label、dt、dl、input、div等。

(2)无论这个标签藏的多深,一定能够被选择上。

(3)选择的所有,而不是一个。

2、ID选择器:规定用#来定义(名字自定义)

针对某一个特定的标签来使用,只能使用一次。css中的ID选择器以”#”来定义。

举例:

Document

#mytitle

{

border:3px dashed green;

}

然后在别处使用id来引用它:

你好

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。这个标签的名字,可以任取,但是:

(1)只能有字母、数字、下划线。

(2)必须以字母开头。

(3)不能和标签同名。比如id不能叫做body、img、a。

(4)大小写严格区分,也就是说aa,和AA是两个不同的ID

另外,特别强调的是:HTML页面,不能出现相同的id,哪怕他们不是一个类型。比如页面上有一个id为pp的p,一个id为pp的div,是非法的!

一个标签可以被多个css选择器选择:

比如,可以同时让标签选择器和id选择器作用于同一个标签。(用到了层叠)如下:

请点击输入图片描述

然后通过网页的审查元素看一下效果:

请点击输入图片描述

现在,假设选择器冲突了,比如id选择器说这个文字是红色的,标签选择器说这个文字是绿色的。那么听谁的?

实际上,css有着非常严格的计算公式,能够处理冲突.

一个标签可以被多个css选择器选择,共同作用,这就是“层叠式”的第一层含义

3、类选择器:规定用圆点.来定义

类选择器.针对想要的所有标签使用。优点:灵活。

css中用.来表示类。举例如下:

.oneclass/*定义类选择器*/{

width:800px;

}

然后在别处使用class来引用它:

你好

和id非常相似,任何的标签都可以携带id属性和class属性。但是id属性只能被某一特定标签引用一次

class属性的特点:

特性1:类选择器可以被多种标签使用。

特性2:同一个标签可以使用多个类选择器。用空格隔开。举例如下

我是一个h3啊

而不能写成:

我是一个h3啊

类选择器使用的举例:

类选择器的使用,能够决定一个人的css水平。

应该注意:

(1)不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同完成这个标签的样式。

(2)每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

如:

.lv{

color: green;

}

.da{

font-size: 30px;

}

.underline{

text-decoration: underline;

}

然后让每个标签去选取自己想要用的类选择器:

段落1

段落2

段落3

问题:到底用id还是用class?

答案:尽可能的用class,除非极特殊的情况可以用id。

原因:id是js用的。也就是说,js要通过id属性得到标签,所以css层面尽量不用id,要不然js就很别扭。另一层面,会认为一个有id的元素,有动态效果。

举例如下:

请点击输入图片描述

上图所示,css和js都在用同一个id,会出现不好沟通的情况。

记住这句话:类上样式,id上行为。意思是说,class属性交给css使用,id属性交给js使用。

上面这三种选择器的区别:

标签选择器针对的是页面上的一类标签。

ID选择器是只针对特定的标签(一个),ID是此标签在此页面上的唯一标识。

类选择器可以被多种标签使用。

4、后代选择器: 定义的时候用空格隔开

对于E F这种格式,表示所有属于E元素后代的F元素,有这个样式。空格就表示后代。

后代选择器,就是一种平衡:共性、特性的平衡。当要把某一个部分的所有的什么,进行样式改变,就要想到后代选择器。

后代选择器,描述的是祖先结构。

看定义可能有点难理解,我们来看例子吧。

举例1:

.div1 p{

color:red;

}

空格就表示后代。.div1 p 表示.div1的后代所有的p。

这里强调一下:这两个标签不一定是连续紧挨着的,只要保持一个后代的关联即可。也就是说,选择的是后代,不一定是儿子。

举例:

h3 b i{

color:red ;

}

上方代码的意思是说:定义了标签中的标签中的标签的样式。

同理:h3和b和i标签不一定是连续紧挨着的,只要保持一个后代的关联即可。

效果:

请点击输入图片描述

或者还有下面这种写法:

请点击输入图片描述

上面的这种写法,标签和标签并不是紧挨着的,但他们保持着一种后代关系。

还有下面这种写法:(含类选择器、id选择器都是可以的)

请点击输入图片描述

在开头说了:后代选择器,描述的是一种祖先结构。举个例子来说明这句话:

Document

div div p{

color: red;

}

.div2{...}

.div3{...}

.div4{...}

我是什么颜色?

上面css中的div div p,也能使文字的颜色变红。通过浏览器的审查元素,我们可以看到 p元素的祖先列表:

请点击输入图片描述

上一篇:没有了
技术干货
零基础学习
行业多年深耕,从这报名,学费立减800
  • 岳同学180****1241刚刚成功领取
  • 胡同学134****6431刚刚成功领取
  • 李同学150****6122刚刚成功领取
  • 张同学136****2231刚刚成功领取
  • 孙同学178****5521刚刚成功领取
  • 齐同学156****7788刚刚成功领取
猜你喜欢
查看更多
相关推荐
查看更多
现在学习,我的薪资能达到多少?
立即报名

联系我们:

Q:2638333071

鄂ICP备2023015464号