css属性选择器实例-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial 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>

Atas ialah kandungan terperinci css属性选择器实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Draggin ' dan Droppin ' dalam ReactApr 17, 2025 am 11:52 AM

Ekosistem React menawarkan kita banyak perpustakaan yang semuanya memberi tumpuan kepada interaksi seret dan penurunan. Kami mempunyai React-Dnd, React-Beautiful-Dnd,

Perisian CepatApr 17, 2025 am 11:49 AM

Terdapat beberapa perkara yang saling berkaitan dengan perisian cepat sejak kebelakangan ini.

Kecerunan bersarang dengan klip latar belakangApr 17, 2025 am 11:47 AM

Saya tidak boleh mengatakan saya menggunakan klip latar belakang semua yang kerap. Saya ' Tetapi saya diingatkan dalam jawatan oleh Stefan Judis,

Menggunakan RequestAnimationFrame dengan cangkuk ReactApr 17, 2025 am 11:46 AM

Animasi dengan RequestAnimationFrame semestinya mudah, tetapi jika anda belum membaca dokumentasi React dengan teliti maka anda mungkin akan mengalami beberapa perkara

Perlu tatal ke bahagian atas halaman?Apr 17, 2025 am 11:45 AM

Mungkin cara paling mudah untuk menawarkan kepada pengguna adalah pautan yang mensasarkan ID pada elemen. Begitu seperti ...

API terbaik (graphql) adalah salah satu yang anda tulisApr 17, 2025 am 11:36 AM

Dengar, saya bukan pakar GraphQL tetapi saya suka bekerja dengannya. Cara ia mendedahkan data kepada saya sebagai pemaju front-end cukup sejuk. Ia seperti menu

Berita Platform Mingguan: Bookmarket Jarak Teks, Menunggu Tahap Teratas, Penunjuk Memuatkan AMP BaruApr 17, 2025 am 11:26 AM

Pada minggu ini, roundup, sebuah bookmarklet yang berguna untuk memeriksa tipografi, menggunakan menunggu untuk mengamuk dengan cara modul JavaScript mengimport satu sama lain, ditambah Facebook ' s

Pelbagai kaedah untuk mengembangkan kotak semasa memelihara jejari sempadanApr 17, 2025 am 11:19 AM

Saya baru -baru ini melihat perubahan yang menarik pada Codepen: apabila melayang pena di laman web, ada persegi panjang dengan sudut bulat yang berkembang di belakang.

See all articles