css 选择符总结

lt_1111

于 2020-08-26 13:42:51 发布

阅读量1.2k

点赞数 3

分类专栏： css 解决方案文章标签： css css3

本文链接：https://blog.csdn.net/lt_1111/article/details/108236429

版权

css 解决方案专栏收录该内容

8 篇文章 0 订阅

订阅专栏

选择符分类：
1.类型选择符（元素选择符）；
2.ID选择符、类选择符；
3.子选择符；
4.同辈选择符（一般同辈组合子、相邻同辈组合子）；
5.通用选择符；
6.属性选择符；
7.伪元素；
8.伪类；

1.类型选择符（元素选择符）
类型与后台选择符是最基本的选择符。类型选择符用于选择特定类型的元素，比如段落：

p {
	color: black;
}

后台选择符用于选择某个或某组元素的后台。例如：只有作为块引用后代的段落元素会被选中，从而缩进，其他段落都不会缩进。

blockquote p {
	padding-left:2em;
}

2.ID选择符
要想更精确的选择目标元素，可以用ID选择符和类选择符。ID选择符由井号（#）开头，类选择符由点（.）开头。例：

#desc {
	font-size:28px;
}
.date-color {
	color:red;
}
<p id="desc">这是一段描述</p>
<p class="date-color">红色字体日期：2020/07/02</p>

3.子选择符
子选择符属于高级选择符。与后台选择符不同的是子选择符只选择一个元素的直接后代，也就是子元素。
在这里插入图片描述

#nav > li  > span {
	color:red;
	padding-left:10px;
}
<ul id="nav">
 <li><span>一级标题1</span></li>
      <li><span>一级标题2</span></li>
      <li><span>一级标题3</span>
        <ul>
          <li><span>二级标题1</span></li>
          <li><span>二级标题2</span></li>
        </ul>
      </li>
      <li><span>一级标题4</span></li>
</ul>

4.同辈选择符（一般同辈组合子、相邻同辈组合子）
一般同辈组合子可以选择h2后面的所有段段落，而相邻同辈组合子只能选择位于h2后的一个元素。如下分别为相邻同辈组合子的使用和一般同辈组合子的使用。
在这里插入图片描述

h2 + p {
  font-size:1.6em;
  color:#777;
}
<h2>标题行</h2>
<p>这是一段相邻描述行</p>
<p>这是普通描述行</p>

在这里插入图片描述

h2 ~ p {
  font-size:1.6em;
  color:#777;
}

5.通用选择符
通用选择符可以匹配任何元素。用符号星号（*）表示。那么是否可以用通用选择符来删除所有元素默认的内外边距呢？比如：

* {
	padding:0;
	margin:0;
}

事实上，这写可能带来很多意想不到的后果，特别是button 、select等表单元素，如果想重设样式，最好还是像下面这样明确指定元素：

h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, p {
	padding:0;
	margin:0;
}

要重设样式的话，有很多现成的库。比如：Eric Meyer的CSS Reset 和 Nicolas Gallagher 的 Normalize.css。区别：后者并没有把外边距和内边距重设为0，而是旨在确保所有元素样式跨浏览器的一致性。

6.属性选择符
顾名思义，属性选择符基于元素是否有某个属性或者属于是否有某个值来选择元素。
要匹配是否有某个属性

abbr[title] {
	border-bottom:1px solid #0aacfd;
}
abbr[title]:hover {
	cursor:help;
}

根据某个属性值来进行匹配

inpu[type="submit"] {
	cursor:pointer;
}

要匹配以某些字符开头的属性值，在等号前面加上插入符（^）

a[href^="http:"]

要匹配以某些字符结尾的属性值，在等号前面加上美元符号（$）

img[src$=".jpg"]

要匹配包含某些字符的属性值，在等号前面加上星号（*）

a[href*="/about/"]

要匹配以空格分隔的字符串中的属性值（比如rel属性的值），在等号前面加上波浪号（~）

a[rel~=next]

要匹配开头是指定值或指定值后连着一个短划线的情况，在等号前面加上竖线（|）

a[lang|=en]

这条规则可以匹配属性值en和en-us,暗示这个选择符很适合选择属性值中的语言代码。

7.伪元素
有时候我们想选择的页面区域不是通过元素来表示的，而我们也不想为此添加额外的标记。此时伪元素就可以派上用场了。
::first-letter 选择一段文本的第一个字符
::first-line 选择一段文本的第一行
在这里插入图片描述

.chapter::before{
  content :' ” ';
  font-size:5em;
}
.chapter p::first-letter{
  float:left;
  font-size:2em;
}
.chapter p::first-line{
  text-transform:uppercase;
}

<h1>A Study In Scarlet</h1>
<selection class="chapter">
   <p>
     In the year 1878 I took my degree of Doctor of Medicine of the University of London,
     and proceeded to Netley to go through the course prescribed for surgeons in the army.Having
    completed my studies there, I was duly attached to the Fifth Northumberland Fusiliers as Assistant SURGEON.
  </p>
</selection>

提示：伪元素应该像前面代码块中一样使用双冒号。有些旧版本浏览器支持单冒号语法，现在使用单冒号也是可以的。出于兼容性的考虑，使用某些伪元素时仍然要以采用单冒号语法。

8.伪类
有时候，我们想基于文档结构以外的情形来为页面添加样式，比如基于超链接或表单元素的状态。这时候就可以使用伪类选择符。伪类选择符和伪元素的区别：前者是使用一个冒号开头，用于选择元素的特定状态或关系。后者使用双冒号。

/* 未访问过的链接为蓝色 */
a:link{
  color:blue;
}
/* 访问过的链接为绿色 */
a:visited{
  color:green;
}
/* 链接在鼠标悬停及获取键盘焦点时为红色 */
a:hover,
a:focus{
  color:red;
}
/* 活动状态时为紫色 */
a:active{
  color:purple;
}