css选择器的作用,有用到css选择器的有哪些
大家好,css选择器的作用相信很多的网友都不是很明白,包括有用到css选择器的有哪些也是一样,不过没有关系,接下来就来为大家分享关于css选择器的作用和有用到css选择器的有哪些的一些知识点,大家可以关注收藏,免得下次来找不到哦,下面我们开始吧!
css的选择器是什么东西
CSS主要的作用就是给网页中的dom元素设置样式,选择器则是用来匹配dom元素的。
CSS中的选择器有三种,分别是标签选择器(根据元素标签名称),类选择器(根据元素class属性),id选择器(根据元素id属性),并且三种选择器可以相互结合使用
例如:
body{background-color:red}
//这里的body就是标签选择器了,{}中是设置匹配元素的背景颜色,即设置body背景色为红色
#main{width:600px}
//这里的#main就是id选择器了,匹配网页中id为main的元素
.logo{width:300px}
//这里的.logo就是类型选择器了,匹配网页中class为logo的元素
div.logo{width:300px}
//这里的div.logo结合了标签选择器和类选择器,匹配网页中class为logo的div元素
html标签作用是什么在定义css时,它的伪选择器包括哪几种
<a>标签可定义锚。锚(anchor)有两种用法:
通过使用 href属性,创建指向另外一个文档的链接(或超链接)
通过使用 name或 id属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)
<a>元素最重要的属性是 href属性,它指定链接的目标。
伪类选择器包括:
:link表示未访问的链接
:visited表示已访问的链接
:hover表示鼠标悬停的链接
:active表示选定的链接
在 CSS定义中,a:hover必须被置于 a:link和 a:visited之后,才是有效的。
在 CSS定义中,a:active必须被置于 a:hover之后,才是有效的。
伪类名称对大小写不敏感。
二、CSS之——选择器
作用:通过元素选择器可以选择页面中的所有指定元素
语法:标签名{}
作用:通过元素的class属性值选中一组元素
语法:.class属性值{}
id选择器
作用:通过元素的id属性值选中唯一的一个元素
语法:#id属性值{}
复合选择器(交集选择器)
作用:可以选中同时满足多个选择器的元素
语法:选择器1选择器2选择器N{}
选择器分组(并集选择器)
作用:通过选择器分组可以同时选中多个选择器对应的元素
语法:选择器1,选择器2,选择器N{}
通配选择器
作用:可以用来选中页面中的所有的元素
语法:*{}
元素之间的关系:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
后代元素:直接或间接被祖先元素包含的元素,子元素也是后代元素
兄弟元素:拥有相同父元素的元素叫做兄弟元素
作用:选中指定元素的指定后代元素
语法:祖先元素后代元素{}
有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素。
给链接定义样式:
有四个伪类可以让你根据访问者与该链接的交互方式,将链接设置成4中不同的方式。
其他:
否定伪类
否定伪类可以帮助我们选择不是其他东西的某种东西。
语法::not(选择器){}
比如p:not(.hello)标识选择所有的p元素,但是class为hello的除外。
属性选择器可以挑选带有特殊属性的标签。
语法:
[属性名]
[属性名="属性值"]
[属性名~="属性值"]
[属性名 ^="属性值"]
[属性名|="属性值"]
[属性名$="属性值"]
[属性名*="属性值"]
作用:选中指定父元素的指定子元素
语法:父元素>子元素
比如body> h1将选择body字标签中的所有h1标签
IE6及以下的浏览器不支持子元素选择器
其他子元素选择器
除了根据祖先父子关系,还可以根据兄弟关系查找元素。
语法:
兄弟元素+兄弟元素:查找后边一个兄弟元素
兄弟元素~兄弟元素:查找后边所有的兄弟元素
在页面中使用CSS选择器选中元素时,经常都是一个元素同时被多个选择器选中。
比如:
这两个选择器都会选择h1元素,如果两个选择器设置的样式不一样那还好不会产生冲突,但是如果两个选择器设置的是同一个样式,这样h1到底要应用哪个样式呢?CSS中会默认使用权重较大的样式,下面看一下权重又是如何计算的。
不同的选择器有不同的权重值:
文章到此结束,如果本次分享的css选择器的作用和有用到css选择器的有哪些的问题解决了您的问题,那么我们由衷的感到高兴!