A-A+

温故知新:CSS选择符有哪些?它们是如何使用和生效的?

2018年09月25日 css, 前端基础 暂无评论

理解CSS的最大关键是理解选择器。选择器允许我们选择特定的HTML元素并将样式应用于它们。我们现在不考虑样式,我们先考虑如何选择html元素。
在下面的示例中,CSS将位于名为style.css的文件中,从名为index.html的HTML文档中引用该文件。它们是单独的文件,这是CSS的优点,使样式和结构分离
这是HTML文件的样子:

<!DOCTYPE html>
<html lang="en">
<head>

<title>我们在学习选择器!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

 
 


<h1 id="hello">hello world</h1>

<body>
</html>

ID选择

#happy-cake {
}

 

<!-- WILL match -->
<div id="happy-cake"></div>
<!-- WILL match -->
<aside id="happy-cake"></aside>
<!-- Will NOT match -->
<div id="sad-cake">Wrong ID!</div>
<!-- Will NOT match -->
<div class="happy-cake">That's not an ID!</div>

ID选择器是最强大的选择器类型。这意味着他们优于其他类型的选择器和win中定义的样式。这听起来不错,但这通常被认为是不好的,因为我们有时候需要覆盖样式,如果用id选择器的话,这会造成困难。

类名(class)选择器

.module { }

 

<!-- WILL match -->
<div class="module"></div>
<!-- WILL match -->
<aside class="country module iceland"></aside>
<!-- Will NOT match -->
<div class=".module">The dot is for CSS, not HTML</div>
<!-- Will NOT match -->
<div class="bigmodule">Wrong class</div>

类选择器是最友好的。它们可能是最有用和多功能的选择器。部分原因是它们在所有浏览器中得到很好的支持。此外,我们可以在HTML元素上添加多个类(仅用空格分隔)。部分原因是因为有一些JavaScript可以专门用来操作类。

Tag标签选择器

H2 {}

 

<!-- WILL match -->
<h2>Hi, Mom</h2>
<main>
<div>
<!-- WILL match -->
<h2>Anywhere</h2>
</div>
</main>
<!-- Will NOT match -->
<div class="h2">这里是类名,无法匹配</div>
<!-- Will NOT match -->
<h2class="yolo">确保在标签后面有空格分开,否则是无法匹配的</h2>

 
在更改该HTML元素特有的属性时,标记选择器最有用。就像设置ul的list-style<pre>的tab-size。同样在重置样式表中,您专门尝试取消设置浏览器应用于某些元素的样式。
不要过分依赖它们。让class去定义样式,可以在任何 HTML元素上使用通常更有用。

属性选择

[data-modal="open"] {
}


<!-- WILL match -->
<div data-modal="open"></div>
<!-- WILL match -->
<aside class='closed' data-modal='open'></aside>
<!-- Will NOT match -->
<div data-modal="false">Wrong value</div>
<!-- Will NOT match -->
<div data-modal>No value</div>
<!-- Will NOT match -->
<div data-modal-open>Wrong attribute</div>

IE 6不支持属性选择器。

位置选择器

:nth-child(2) {
}

 

<ul>
  <li>nope</li>
  <!-- WILL match -->
  <li>yep, I'm #2</li>
  <li>nope</li>
</ul>

除了以下几种不同的位置选择器:nth-​​child。使用简单的表达式(如3n=“每三分之一”),您可以根据它们在HTML中的位置选择元素。

其他伪选择器

:empty {
}


<!-- WILL match -->
<div></div>
<!-- WILL match -->
<aside data-blah><!-- nothin' --></aside>
<!-- Will NOT match -->
<div> </div>
<!-- Will NOT match -->
<div>
</div>

:empty是许多伪选择器之一,你可以通过冒号(:)识别它们。它们通常仅代表元素和属性而代表您无法知道的东西。
请注意,这些与伪元素略有不同,您可以通过双冒号(::)识别它们。他们负责通过他们选择的内容向页面添加内容。

更多

选择器可以组合在一起。例如:

.module.news {
  /* Selects elements with BOTH of those classes */
}
#site-footer::after {
  /* Adds content after an element with that ID */
}
section[data-open] {
  /* Selects only section elements if they have this attribute */
}

也有选择组合程序一样~,并+>影响选择,如:

.module > h2 {
  /* Select h2 elements that are direct children of an element with that class */
}
h2 + p {
  /* Select p elements that are directly following an h2 element */
}
li ~ li {
  /* Select li elements that are siblings (and following) another li element. */
}

 

标签:

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录