css选择器

#################

选择器

每一条CSS样式的定义都由两部分组成，形式如下:选择器{样式}。
在之前的部分就是“选择器”，“选择器”指明了应用这些“样式”的网页元素。

简单选择器：

（1）id选择器：#id，通过元素id唯一确定一个元素，在css框架中很少有

<!DOCTYPE html>
<html>
<head>

<style>
#demo {
  text-align: left;
  color: red;
}
</style>
</head>
<body>
<p id="demo">Hello World!</p>
<p>xxxxx.</p>

</body>
</html>

（2）元素选择器：通过元素名称选择同类型的元素，在css框架中用的很多：

<!DOCTYPE html>
<html>
<head>
<style>

p {
  text-align: left;
  color: red;
} 

</style>
</head>
<body>

<p>the style.</p>
<p id="demo">Me too!</p>
<p>And me!</p>

</body>
</html>

（3）分组选择器：逗号分割即可，对多个元素配置相同的样式设置，在css框架中用的很多：：

<!DOCTYPE html>
<html>
<head>

<style>
h1, h2, p {
  text-align: left;
  color: red;
}
</style>

</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>

（4）类选择器：选择具有相同class属性的所有元素：在css框架中用的最多：

.类名 {样式声明} 表示选择包含类名这个单词的所有元素：

<!DOCTYPE html>
<html>
<head>

<style>
.left{
  text-align: left;
  color: red;
}
</style>

</head>
<body>
<h1 class="left">Red and center-aligned heading</h1>
<p class="left">Red and center-aligned paragraph.</p> 
</body>
</html>

多类选择器：同一个元素有多个类，类名称之间无顺序要求，用空格分开即可：

我们假设 class 为 important 的所有元素都是粗体，而 class 为 warning 的所有元素为斜体，class属性中同时包含 important 和 warning 这两个单词的所有元素还有一个银色的背景：

<html>
<head>
<style type="text/css">
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
</style>
</head>

<body>
<p class="important">This paragraph is very important.</p>

<p class="warning">This is a warning.</p>

<p class="important warning">igoodful is my name</p>

</body>
</html>

在html中，class="类名+空格+类名",表示该元素同时拥有两个类

元素类选择器：通过element.class：

<!DOCTYPE html>
<html>
<head>

<style>
h1.left {
  color: red;
}
</style>

</head>
<body>
<h1 class="left">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p> 
<h1 class="center">This heading will not be affected</h1>
</body>
</html>

元素class属性具有多个值：

<!DOCTYPE html>
<html>
<head>

<style>
p.demo {
  text-align: left;
  color: red;
}
p.large {
border: 10px solid green;
}
</style>

</head>
<body>
<h1 class="demo">This heading </h1>
<p class="demo">This paragraph.</p>
<p class="demo large">xxxxx</p> 

</body>
</html>

后代选择器：元素A 元素B：表示在元素A中的所有元素B：（元素B是元素A的后代，至于多少代则不管）

<!DOCTYPE html>
<html>
<head>

<style>
div p {
  background-color: green;
  width:50%;
}
</style>

</head>
<body>
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>

子选择器：元素A > 元素B：表示在元素A中的所有的直属元素B：（B元素是元素A的亲生儿子）

<!DOCTYPE html>
<html>
<head>

<style>
div > p {
  background-color: green;
  width:50%
}
</style>

</head>
<body>
<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>

相邻兄弟选择器：元素A + 元素B：紧跟元素A屁股后面的第一个元素B：

<!DOCTYPE html>
<html>
<head>

<style>
div + p {
  background-color: green;
  width:50%
}
</style>

</head>
<body>
<div>
  <p>xxx</p>
  <p>yyy</p>
  <div>
    <p>xxx</p>
    <p>yyy</p>
  </div>
<p>ccc</p>
<p>bbb</p>
</div>
<p>1111</p>
<p>222</p>
<div>
  <p>dddd</p>
  <p>gggg</p>
</div>
<p>444</p>
<p>5555</p>
</body>
</html>

通用兄弟选择器：元素A ~ 元素B：在dom树结构中，在元素A后面且与元素A在相同层次的所有元素B：

<!DOCTYPE html>
<html>
<head>

<style>
div ~ p {
  background-color: green;
  width:50%;
}
</style>

</head>
<body>
<p>Paragraph 1.</p>
<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<p>Paragraph 4.</p>
<div>
</div>
<p>Paragraph 5.</p>
<p>Paragraph 6.</p>
</body>
</html>

属性选择器：

：[属性A]：表示在html中写上了属性A的所有元素：

<style>
[class] {
  background: green;
}
</style>

：[属性A = "xxx"]：表示属性A的值为xxx的所有元素：

<style>
[class="top"] {
  background: green;
}
</style>

：[属性A ^= "xxx"]：表示属性A的值以xxx开头的所有元素：

<style>
[class^="top"] {
  background: yellow;
}
</style>

：[属性A $= "xxx"]：表示属性A的值以xxx结尾的所有元素：

<style>
[class $="xxx"] {
  background: green;
}
</style>

：[属性A *= "xxx"]：表示属性A的值包含字符串xxx的所有元素：

<style>
[class *="xxx"] {
  background: green;
}
</style>

：[属性A ~= "xxx"]：表示属性A的值中包含单词xxx的所有元素：

<!DOCTYPE html>
<html>
<head>

<style>
[title~=flower] {
  border: 10px solid yellow;
}
</style>

</head>
<body>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">
<img src="img_flwr.gif" title="flower 单调递 " width="224" height="162">
<img src="landscape.jpg" title="咕嘎嘎 flowers - landscape" width="160" height="120">
</body>
</html>

伪类选择器：

:root，等价于元素html选择器，即根元素选择器，匹配文档根元素html。配置常见的字体、颜色、尺寸（屏幕的尺寸）

#############

posted @ 2022-09-08 16:53 igoodful 阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部

igoodful

一枚数据库管理员（DBA），从事的数据库有：MySQL，PostgreSQL，Redis，MongoDB