cari

Rumah >hujung hadapan web >tutorial css >简单的CSS选择器-常规选择器

简单的CSS选择器-常规选择器

无忌哥哥
无忌哥哥asal
2018-06-29 15:18:501617semak imbas

简单的CSS选择器-常规选择器

* css常规选择器有5个

* tag标签选择器: $('div'),根据标签名选择,返回集合

* id选择器:$('#top'), 根据元素id属性选择,返回单个

* class选择器:$('.active'), 根据元素class属性选择,返回集合

* *通配选择器: $('*'),选择全部元素,返回集合

* group组选择器: $('p, h2, li'),同时选择多个不同元素,返回集合

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1简单的CSS选择器-常规选择器</title>
</head>
<body>
<h2>标签选择器</h2>
<h2>标签选择器</h2>
<h2 id="green">id选择器</h2>
<h2>类选择器</h2>
<h2>类选择器</h2>
<p>我是一个段落</p>
<li>我是一个列表项</li>
</body>
</html>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//1.标签选择器:选择页面中具有相同标签名称的元素,返回集合
$(&#39;h2&#39;).css(&#39;color&#39;, &#39;red&#39;)
//2.id选择器: 根据标签中的id属性来选择元素,返回单个
$(&#39;#green&#39;).css(&#39;color&#39;, &#39;green&#39;)
//3.类选择器: 也叫class选择器,根据标签中的class属性来选择元素,返回集合
$(&#39;.blue&#39;).css(&#39;color&#39;, &#39;blue&#39;)
//4.通配选择器: 选择所有的元素,返回集合
$(&#39;body *&#39;).css(&#39;background-color&#39;, &#39;wheat&#39;)
//5.群组选择: 同时选择多个不同类型的元素,返回集合
$(&#39;h2.blue, p, li&#39;).css(&#39;border&#39;, &#39;2px solid red&#39;)
</script>

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 sebelumnya：css层次元素之间的清除浮动的技巧Artikel seterusnya：简单的CSS选择器-层级选择器

Artikel berkaitan

Lihat lagi