当前位置: 首页 > Web前端 > CSS

CSS选择器的分类

时间:2023-03-30 15:15:58 CSS

《PHP 面试问答》结合实际的PHP面试,系统总结了面试中的各种问题,力求提供简洁准确的答案。如果大家在PHP面试中遇到问题,欢迎提Issues交流。包括网络协议、数据结构与算法、PHP、Web、MySQL、Redis、Linux、安全、设计模式、架构、自我介绍、离职原因、职业规划、准备题等。一些基本规则可以提交给通过CSS元素类型在文档中设置文档应用某些规则使用CSS,您可以创建易于修改和编辑的规则,并且可以轻松地应用于您定义的所有文本元素。规则结构每条规则有两个基本部分:一个选择器和一个声明块;声明块由一个或多个声明组成;每个声明都是一个属性值对每个样式表由一系列规则组成如规则左侧所示,选择器定义文档的哪些部分将受到影响规则的右侧包含声明块,其中包含一个或多个声明。每个声明都是CSS属性和该属性值的组合元素选择器最常见的选择器往往是HTML元素。文档的元素基本上是选择器声明和关键字声明。声明块包含一个或多个声明。声明始终采用以下格式:一个属性后跟一个冒号,然后是一个值,再后跟一个分号。冒号和分号后可以有0个或多个空格如果一个属性的值可以取多个关键字,这种情况下关键字之间通常用空格隔开。并非所有属性都接受多个关键字,但很多都接受。p{font:mediumHelvetica;}选择器通配符选择器CSS2引入了一个新的简单选择器,称为通配符选择通用选择器,显示为星号(*)。这个选择器可以匹配任何元素,就像通配符*{color:red;}类选择器要应用样式而不考虑涉及的具体元素,最常见的方法是使用类选择器。在使用类选择器之前,需要修改特定的文档标记,以便选择器正常工作。为了将类选择器样式与元素相关联,必须使用适当的值指定类属性*.warning{font-weight:bold;}p.warning{font-weight:bold;}.warning{font-weight:bold;}multipleselectors.warning{font-weight:bold;}.urgent{font-style:italic;}.warning.urgent{background:silver;}ID选择器ID选择器前面有#号ID选择器不引用class属性的值在HTML文档中,ID选择器只使用一次*#first-para{font-weight:bold;}#first-para{font-weight:bold;}属性选择器在一些标记语言中,不能使用类和ID选择器。为了解决这个问题,CSS2引入了属性选择器(attributeselector),它可以根据元素的属性和属性值来选择元素。你可以使用一个简单的属性选择器HelloSerenityFoolingh1[class]{color:silver;}img[alt]{border:3pxsolidred;}/*将样式应用于所有具有alt属性的图像*/*[title]{font-weight:bold;}/*包括标题(title)all信息的元素变为粗体*/根据具体属性值选择除了选择具有某些属性的元素外,还可以进一步缩小选择范围,只有选择具有特定属性值的元素/*才会指向Web服务器具体超链接加粗*/a[href="https://blog.maplemark.cn"]{font-weight:bold;}VenusEarthMars/*将第二个元素的文字加粗*/planet[moons="1"]{font-weight:bold;}根据一些属性取值如果属性可以接受单词列表(单词之间用空格隔开),你可以选择一个根据任意一个词img[title~="Figure"]{border:1pxsolidgray;}子串匹配属性选择器类型描述[foo^="bar"]选择所有foo属性值以"bar"开头的元素[foo$="bar"]选择foo属性值以"bar"结尾的所有元素[foo*="bar"]选择foo属性值中子字符串为"bar"的所有元素Selecttype您好!您好!

您好!

Jrooana!*[lang|="en"]{color:white;}这个属性选择器最常见的用途是匹配语言值Descendant选择器通过文档树结构,可以理解什么是后代.后代选择器,也称为包含选择器/上下文选择器定义后代选择器是为了创建仅在某些结构中起作用而在其他结构中不起作用的规则

TextOne

文一后代

文二

文三

文本二

文本三

.rowp{color:red;}选择子元素在某些情况下,您可能不想选择任意的后代元素;相反,您想缩小范围并只选择另一个元素的子元素。行>p{color:red;}选择相邻的兄弟元素
  1. 列表项1
  2. 列表项1
  3. 列表项1
  4. 列表项1
  5. li>
ol+ul{font-weight:bold;}/*willhitul*/ul后面必须跟ol伪类选择器Anchor类型被称为伪类链接伪类CSS2.1只定义了两个Pseudo伪类名称描述应用于超链接:link表示所有的锚是超链接,指向一个未访问的地址:visited表示所有被访问的锚点超链接a{color:black;}a:link{color:bule;}a:visited{color:red;}动态伪类CSS2.1定义了3个动态伪类,可以改变外观根据用户行为的文档伪类名说明:focus表示当前有t的元素他输入焦点:hover表示鼠标指针停留在哪个元素上:active表示用户输入激活的元素伪类顺序:link-visited-focus-hover-active选择第一个子元素可以使用static伪类:first-child来selectelements第一个子元素p:first-child{font-weight:bold;}伪元素选择器就像伪类为锚点指定幻象类一样,伪元素可以在文档中插入一个假元素来得到一定的效果CSS2.1中定义了4个伪元素:设置首字母样式、设置首行样式、设置前后元素样式设置首字母样式p:first-letter{color:red;}设置第一行的样式p:first-line{color:purple;}:first-letter和:first-line限制在CSS2中,:first-letter和:first-line伪-elements只能应用于标记或段落等块级元素,而不能应用于内联元素nts如超链接。设置元素前后样式p:before{color:black;}p:after{color:red;}本文转载自枫叶博客,《CSS选择器的分类》