【css】选择器

半花
174 阅读8分钟

是什么

CSS（层叠样式表）中的选择器是用来指定哪些HTML元素应该被样式化的工具。选择器可以单独使用，也可以组合使用，以精确匹配到需要被样式化的元素。下面是一些基本和常用的CSS选择器类型：

选择器的种类

1、元素选择器（类型选择器） ：

根据HTML元素的名称来选择元素。例如，p 选择所有<p>元素。

<p>这是一个段落。</p>  
<p>这是另一个段落。</p>  
<div>这是一个div元素，不会受到p选择器的影响。</div>  

p {  
    color: blue; /* 将段落文本颜色设置为蓝色 */  
    font-size: 16px; /* 设置字体大小为16像素 */  
    line-height: 1.5; /* 设置行高为1.5倍 */  
    margin-bottom: 20px; /* 设置段落之间的下边距为20像素 */  
}

2、类选择器：

通过HTML元素的class属性来选择元素。类选择器在CSS中以点（.）开头。例如，.classname 选择所有class="classname"的元素。

   <div class="box">这是一个盒子。</div>  
    <p class="highlight">这是高亮显示的段落。</p>  
    <span class="box">这也是一个盒子（但在这里是span元素）。</span>

/* 类选择器 .box 选择所有 class="box" 的元素 */  
.box {  
    border: 2px solid black;  
    padding: 10px;  
    margin: 10px;  
}  
  
/* 类选择器 .highlight 选择所有 class="highlight" 的元素 */  
.highlight {  
    background-color: yellow;  
    color: black;  
}

3、 ID选择器：

通过HTML元素的id属性来选择元素。ID选择器在CSS中以井号（#）开头。由于ID在一个HTML文档中应该是唯一的，所以ID选择器通常用于选择单个元素。例如，#uniqueid 选择id="uniqueid"的元素。

<div id="uniqueHeader">这是一个独特的头部区域。</div> 
<p>这是一个普通的段落。</p> 
<footer id="footerSection">这是页面的底部。</footer>

/* ID选择器 #uniqueHeader 选择 id="uniqueHeader" 的元素 */  
#uniqueHeader {  
    background-color: #4CAF50;  
    color: white;  
    padding: 20px;  
    text-align: center;  
}  
  
/* ID选择器 #footerSection 选择 id="footerSection" 的元素 */  
#footerSection {  
    background-color: #333;  
    color: white;  
    text-align: center;  
    padding: 10px;  
    position: fixed;  
    left: 0;  
    bottom: 0;  
    width: 100%;  
}

4、 通配符选择器：

匹配文档中的任何元素。在CSS中，使用*表示。例如，* { margin: 0; padding: 0; } 会将页面中所有元素的外边距和内边距都设置为0。

/* 通配符选择器 * 选择文档中的所有元素 */  
* {  
    margin: 0; /* 将所有元素的外边距设置为0 */  
    padding: 0; /* 将所有元素的内边距设置为0 */  
    box-sizing: border-box; /* 可选，但常用，它将元素的总宽度和高度设置为包括内边距和边框的宽度 */  
}

5、属性选择器：

根据元素的属性及属性值来选择元素。属性选择器在方括号[]内指定。例如，input[type="text"] 选择所有type属性值为text的<input>元素。

<form>  
  <input type="text" name="username" placeholder="用户名">  
  <input type="password" name="password" placeholder="密码">  
  <input type="email" name="email" placeholder="电子邮件">  
  <input type="submit" value="提交">  
</form>

/* 属性选择器 input[type="text"] 选择所有 type 属性值为 text 的 <input> 元素 */  
input[type="text"] {  
    border: 2px solid blue; /* 蓝色边框 */  
    padding: 5px; /* 内边距 */  
    border-radius: 4px; /* 边框圆角 */  
}

6、 后代选择器（包含选择器）：

选择作为某元素后代的元素。后代选择器通过空格分隔两个选择器来表示。例如，div p 选择所有<div>元素内部的<p>元素。

<div class="container">  
  <p>这是容器内部的第一个段落。</p>  
  <div>  
    <p>这是容器内部另一个<div>中的段落。</p>  
  </div>  
</div>  
  
<p>这是容器外部的段落，不应被选中。</p>

/* 后代选择器 div p 选择所有在 div 元素内部的 p 元素 */  
div p {  
    color: red; /* 文本颜色设置为红色 */  
}

7、 子选择器：

选择作为某元素直接子元素的元素。子选择器通过>分隔两个选择器来表示。例如，ul > li 选择所有直接位于<ul>元素内部的<li>元素，而不选择嵌套在其他<li>元素中的<li>元素。

<ul class="main-list">  
  <li>列表项 1</li>  
  <li>列表项 2  
    <ul class="nested-list">  
      <li>嵌套列表项 1</li>  
      <li>嵌套列表项 2</li>  
    </ul>  
  </li>  
  <li>列表项 3</li>  
</ul>

/* 子选择器 ul > li 选择所有直接位于 ul 元素内部的 li 元素 */  
ul > li {  
    background-color: lightgray; /* 背景颜色设置为浅灰色 */  
    padding: 5px; /* 内边距 */  
    margin: 2px; /* 外边距 */  
}  
  
/* 注意：以下样式是为了说明嵌套列表项不会受到上述样式的影响 */  
.nested-list li {  
    background-color: #f0f0f0; /* 嵌套列表项的背景颜色设置为浅灰色与白色之间的颜色 */  
    padding-left: 20px; /* 增加嵌套列表项的内边距以区分层级 */  
}

8、 相邻兄弟选择器：

1、选择紧接在另一元素后的元素，且二者有相同的父元素。相邻兄弟选择器通过加号（+）连接两个选择器来表示。例如，h1 + p 选择所有紧随<h1>元素之后的同级<p>元素。

<div> 
  <h1>这是一个标题</h1> 
  <p>这是紧随标题后的段落。</p> 
  <p>这是另一个段落，但它不是紧随标题后的。</p> 
</div>

在这个例子中，只有第一个<p>元素（即紧随<h1>元素之后的<p>元素）的文本颜色会被设置为蓝色，而第二个<p>元素则不会受到影响。

/* 选择所有紧随 <h1> 元素之后的同级 <p> 元素 */ 
h1 + p { 
  color: blue;
}

2、选择某一元素之后的所有兄弟元素，且二者有相同的父元素。通用兄弟选择器通过波浪号（~）连接两个选择器来表示。例如，h1 ~ p 选择所有在<h1>元素之后的所有<p>兄弟元素。

<div> 
  <h1>这是一个标题</h1> 
  <p>这是紧随标题后的段落。</p> 
  <p>这是另一个段落，但它在标题之后。</p> 
</div>

/* 选择所有在 <h1> 元素之后的所有 <p> 兄弟元素 */  
h1 ~ p {  
    color: green;  
}

9、 伪类选择器：

用于定义元素的特殊状态。例如，:hover 用于选择鼠标指针浮动在上面的元素，:first-child 用于选择其父元素的第一个子元素。

<div>  
  <p>段落一</p>  
  <p>段落二</p>  
  <p>段落三</p>  
</div>

p:first-child:hover {  
  color: blue;  
}  
p:last-child {  
  font-style: italic;  
}

10、 伪元素选择器：

用于样式化元素的某个部分。例如，::before 在元素内容之前添加新的内容或样式，::after 在元素内容之后添加新的内容或样式。

<div class="example">这是一段文本。</div>

.example::before {  
  content: "📝 "; /* 在元素内容前添加内容 */  
  color: blue; /* 设置内容的颜色 */  
}

优先级

1. 特殊性：特殊性由选择器中使用的选择器类型的数量和位置决定。下列类型的选择器特殊性依次增加：

  • ID选择器（#）
  • 类选择器（.）
  • 类型选择器（html、body 等）
  • 通配符（*）

2. 来源顺序：如果两个选择器的特殊性相同，则来源于更具体来源的选择器优先级更高。来源顺序依次为：

  • 行内样式
  • 内部样式表
  • 外部样式表
  • 用户代理样式表

3. 声明顺序：如果两个选择器的特殊性和来源顺序都相同，则写在 CSS 文档中靠后的声明优先级更高。

4. 重要性

!important 关键字可以强制提高选择器的优先级。然而，它的使用应避免，因为它会破坏 CSS 的可维护性。

继承属性

继承属性是指子元素可以从其父元素那里继承的CSS属性。这些属性通常与文本的显示和布局有关，但不限于此。以下是一些常见的继承属性：

  1. 字体系列属性：

    • font-family：规定元素的字体系列。
    • font-weight：设置字体的粗细。
    • font-size：设置字体的尺寸。
    • font-style：定义字体的风格（如斜体）。
    • font-variant：设置小型大写字母的字体显示文本（但需注意，并非所有浏览器都支持）。

  2. 文本系列属性：

    • text-indent：文本缩进。
    • text-align：文本水平对齐。
    • line-height：行高。
    • word-spacing：单词之间的间距。
    • letter-spacing：字符之间的间距。
    • text-transform：控制文本大小写。
    • color：文本颜色。
    • direction：规定文本的书写方向。

  3. 其他继承属性：

    • visibility：元素可见性。
    • cursor：光标属性，定义鼠标指针的样式。
    • list-style（包括list-style-type、list-style-image等）：列表布局属性，但需注意，并非所有与列表相关的属性都继承。
    • quotes：生成内容属性，用于定义自动生成的引号样式。

无继承属性

无继承属性是指不会被子元素继承的CSS属性。这些属性通常与元素的布局、尺寸、背景等直接相关。以下是一些常见的无继承属性：

  1. 盒子模型属性：

    • width、height：元素的宽度和高度。
    • margin及其子属性（如margin-top、margin-right等）：外边距。
    • border及其子属性（如border-style、border-width、border-color等）：边框。
    • padding及其子属性（如padding-top、padding-right等）：内边距。

  2. 背景属性：

    • background及其子属性（如background-color、background-image、background-repeat等）：背景颜色和图像。

  3. 定位属性：

    • float、clear、position（及其子属性如top、right、bottom、left）、z-index等：用于控制元素的布局和定位。

  4. 其他无继承属性：

    • display：规定元素应该生成的框的类型。
    • 文本属性中的vertical-align、text-decoration、text-shadow、white-space、unicode-bidi等。
    • 生成内容属性中的content、counter-reset、counter-increment等。
    • 轮廓样式属性中的outline-style、outline-width、outline-color等。
    • 页面样式属性、声音样式属性等，这些属性通常与文档的打印、声音播放等特定功能相关。
avatar
文章
阅读
粉丝