网页设计

当前位置:

您应该学习的高级选择器技术

浏览量:0

        如果您正在阅读本文,那么我可以肯定您至少听过CSS3。最新版本的CSS包含一些属性,这些属性使您可以使用圆角,阴影甚至颜色渐变来设置HTML元素的样式。

但是,这些技术只是CSS3真正功能的表面。在本文中,我将讨论高级选择器

        高级选择器

传统上,CSS选择器一直是:ID(#id),类(.class),HTML元素(例如p),偶尔还有伪类(例如:hover或):active。

这个公式的问题在于,几乎每个元素都需要具有一个钩子。这意味着要具体说明您要选择的内容,该元素需要具有一个ID(如果只是一个元素)或一个类(如果是一组元素),以便浏览器知道您在说什么。

选择器的第一部分只是说要选择,<ul>它是另一个元素的第一个子元素(<body>在本例中为)。

然后继续选择第一个无序列表中的奇数列表项(第一,第三,第五,依此类推)。

        如您所见,结合使用伪类和HTML元素选择器,我们仅选择了两个相同的无序列表中的第一个。

ul:first-of-type li:nth-child(odd) 

        下面显示了另一种执行此操作的方法,该操作执行相同的操作,只是这次选择<ul>页面上的第一个,而不管它是否是另一个元素的第一个孩子。

ul :first-of-type li:nth-child(odd) 

        当您进一步使用CSS选择器时,您会发现有很多方法可以执行相同的操作,这取决于您决定使用哪种选择器。

选择第一个无序列表后,我们可以为奇数列表项设置样式(我们将为它们提供与其他列表项不同的背景色)。

ul:first-child li:nth-child(odd) {
  background-color: #d2fffe;
  border: 1px solid #000;
} 

        不过,这并不是使用的唯一方法:nth-child。我们还可以使用它来根据各个元素的位置设置样式。下面的代码块给出了5列表项中的第一个无序列表我们的网页上的粉红色背景。

body > ul:first-child li:nth-child(5) {
  background: #ffd2d2;
}

        再举一个例子,让我们向我们的HTML文档添加一个Web表单。请注意以下事实:输入元素(name=email)之一具有Boolean属性,disabled以便:disabled稍后可以演示伪类。

<form method =“ post” action =“#”><p>
  <label for =“ name”>名称:</ label>
  <input type =“ text” name =“ name” value =“” /><p>
  <label for =“ email”>电子邮件:</ label>
  <input type =“ text” name =“电子邮件” value =“”已禁用/></ p><p>
  <label for =“ message”>消息:</ label>
  <textarea name =“ message”> </ textarea></ p></ form> 

        以下代码块只是我们Web表单的一些基本样式。这将删除表单上的某些默认样式,并将标签浮动到左侧,将输入浮动到右侧。

form {
  clear: both;
  width: 95%;
}
form p {
  margin-bottom: 15px;
  clear: both;
  overflow: hidden;
}
form label {
  float: left;
}
form input, form textarea {
  width: 70%;
  float: right;
  border: 1px solid #000;
}
form textarea {
  height: 50px;
} 

        现在,我们将利用输入disabled上的属性为该属性email添加更深的灰色背景。

输入:禁用{
  背景:#e7e7e7;} 

        接下来,我们有一个外观复杂的选择器,但实际上很简单。

通过使用:not伪类,我们选择了段落中除<textarea>and<label>元素外的所有内容。

本质上,这将针对非textareas的所有表单字段。

input:disabled {
  background: #e7e7e7;
}

在实际实践中,input在特定情况下用作选择器会更有效,但是我选择以此方式演示:not选择器,以及如何将不同的伪类链接在一起以产生更具体的选择器。

高级选择器就是这样。武汉悟空云互联网介绍了很多内容,但还有其它技术后续供您阅览!

 

[声明]本网整理的媒体稿件是为了分享更多的讯息。此类稿件不代表本网立场,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的某些内容侵犯了您的版权,请把您的相关内容发至此邮箱【wukongclouds@163.com】,我们在确认后,会立即删除,保证您的版权。