css屬性選擇器實例-css教學-PHP中文網

首頁

web前端

css教學

css屬性選擇器實例

无忌哥哥

Jun 28, 2018 pm 05:07 PM

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.属性选择器</title>
<style type="text/css">

/*元素選擇器*/

ul {   
padding: 0;
margin: 0;
width: 450px;
border: 1px dashed #666;
padding: 10px 5px;
}
ul:after {  /*子块撑开父块*/
content:&#39;&#39;;  /*在子元素尾部添加空内容元素*/
display: block;  /*并设置为块级显示*/
clear:both;   /*清除二边的浮动*/
}
li { 
list-style: none; /*去掉默认列表项样式*/
float: left;  /*左浮动*/
width: 40px;  /*设置宽度*/
height: 40px; /*设置高度*/
line-height: 40px; /*文本垂直居中*/
text-align: center; /*文本水平居中*/
border-radius: 50%; /*设置边框圆角*/
background: skyblue; /*背景色天蓝*/
margin-right: 5px; /*每个球之间的右外边距*/
}

/*根據屬性名稱來選擇:例如id屬性*/

*[id] {   /*等价于:  li[id]*/
/*background-color: red;*/
}

/*根據屬性名稱與值來選擇:例如選擇class="green"的元素*/

li[class="green"] {
/*background-color: lightgreen;*/
}

/*選擇class屬性值中包含指定單字的元素*/

li[class ~= "red"] {
background-color: brown;
}

/*選擇以'ph'字母開頭的class類別樣式元素*/

li[class ^= "ph"] {
background-color: coral;
}

/*選擇以's'結尾的類別樣式元素*/

li[class $= "s"] {
background-color: lime;  /*青绿*/
}

/*選擇屬性值中包含指定字母'e'的類別樣式元素:;*/

li[class *= "e"] {
background-color: yellowgreen;  /*234背景为黄绿色*/
}
</style>
</head>
<body>
<ul>
<li id="item1">1</li>
<li>2</li>
<li class="green red">3</li>
<li>4</li>
<li>5</li>
<li id="item2">6</li>
<li>7</li>
<li class="php css">8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

以上是css屬性選擇器實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

如何调整HTML文本框的大小Feb 20, 2024 am 10:03 AM

HTML文本框大小的设定在前端开发中是非常常见的操作。本文将介绍如何设置文本框的尺寸，并提供具体的代码示例。在HTML中，可以使用CSS来设置文本框的尺寸。具体的代码如下：input[type="text"

如何调整WordPress主题避免错位显示Mar 05, 2024 pm 02:03 PM

如何调整WordPress主题避免错位显示，需要具体代码示例WordPress作为一个功能强大的CMS系统，受到了许多网站开发者和站长的喜爱。然而，在使用WordPress创建网站时，经常会遇到主题错位显示的问题，这对于用户体验和页面美观都会造成影响。因此，合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调

了解CSS选择器通配符的权重和优先级的深层次理解Dec 26, 2023 pm 01:36 PM

深入理解CSS选择器通配符的权重和优先级在CSS样式表中，选择器是用来指定样式应用于哪些HTML元素的重要工具。选择器的优先级和权重决定了当多个规则同时作用于一个HTML元素时，应用哪个样式。通配符选择器是CSS中一种常见的选择器。它使用“*”符号表示，表示匹配所有HTML元素。通配符选择器虽然简单，但在某些情况下非常有用。然而，通配符选择器的权重和优先级也

css选择器排除部分的元素是什么Apr 06, 2024 am 02:42 AM

:not() 选择器可用于排除特定条件的元素，其语法为 :not(selector) {样式规则}。示例：:not(p) 排除所有非段落元素，li:not(.active) 排除非活动列表项，:not(table) 排除非表格元素，div:not([data-role="primary"]) 排除非 primary 角色的 div 元素。

css选择器哪些是高级选择器Oct 07, 2023 pm 02:59 PM

css选择器中的高级选择器有后代选择器、子元素选择器、相邻兄弟选择器、通用兄弟选择器、属性选择器、类选择器、ID选择器、伪类选择器和伪元素选择器等。详细介绍：1、后代选择器使用空格分隔的选择器，表示选取某个元素的后代元素；2、子元素选择器使用大于号分隔的选择器，表示选取某个元素的直接子元素；3、相邻兄弟选择器使用加号分隔的选择器，表示选取紧接在某个元素后面的第一个兄弟元素等等。

学会使用CSS选择器的基本语法Jan 13, 2024 am 11:44 AM

掌握基本的CSS选择器语法，需要具体代码示例CSS选择器是前端开发中非常重要的一部分，它可以用来选择和修改HTML文档的各个元素。掌握基本的CSS选择器语法对于编写高效的样式表是至关重要的。本文将介绍一些常见的CSS选择器以及对应的代码示例。元素选择器元素选择器是最基本的选择器，可以通过元素的标签名来选择对应的元素。例如，要选择所有的段落（p元素），可以使用

深入学习响应式布局框架：适合初学者到专家的详尽指南Feb 19, 2024 pm 05:43 PM

响应式布局框架解析：从初学者到专家的必备指南随着移动设备的普及和多样化，响应式布局成为了现代Web设计的必备技能。响应式布局框架以其简单、灵活和可维护的特点，成为了开发者们的首选工具。然而，对于初学者来说，学习和理解响应式布局框架可能会感到有些困惑。本文将从初学者到专家，为您提供一个详细的指南，帮助您掌握响应式布局框架，同时提供具体的代码示例。什么是响应式布

CSS样式无法正常显示的解决方式Feb 24, 2024 pm 01:18 PM

CSS显示不出来怎么办，需要具体代码示例CSS（层叠样式表）是一种用于描述网页元素样式的标记语言，通过设定不同的样式规则，可以控制网页的布局、颜色、字体等外观效果。然而，有时候我们会遇到CSS显示不出来的问题，导致网页无法正常呈现所设定的样式。本文将介绍一些常见的CSS显示问题，并提供具体的代码示例来解决这些问题。引入CSS文件错误在头部（

See all articles