css3 selector (1)_html/css_WEB-ITnose
Start the text directly.
1. Attribute selectorAttribute selector selects elements based on their attributes and attribute values. Using attribute selectors well can elevate your level to a higher level.
1. Select elements based on attributes only
is suitable for selecting elements with a certain attribute, only caring about the attribute and not caring about the attribute value. .
Note: There is no colon or space between the element and the square brackets, and there can be no space between square brackets.
a. Select [E[Attr]] according to an attribute:
*[title]{color:blue;} can be set for all elements with title style.
a[href]{color:red;} only applies styles to anchors with href (a elements).
b. Select [E[Attr1][Attr2]] based on multiple attributes :
a[href][title]{color: red;} for the same time Styles are applied by anchors (a elements) with href and title attributes.
A very practical way to debug styles : img[alt] {border: 5px solid red;} applies styles to all images with alt attributes, thereby highlighting these valid images . This method can be used to diagnose whether the image is indeed valid.
When matching elements based on attribute selectors, these attributes can be customized values. For example:
Define an attribute haha, assign it a value of test, and then pass div[haha] this Attribute selectors can be used to match and add styles.
<style>div[haha]{ background-color: green;}</style><div haha="test">一个测试的div元素</div>The reason why I chose the name so casually is to illustrate that in the attribute selector, custom attributes can also be used, of course this is Not recommended.
2. Select based on attribute values
Select based on attribute values to further narrow the selection range.
a. Select [E[Attr=Val]] based on one attribute value. :
b. Select [E[Attr1=] based on multiple attribute values. Val1][Attr2=Val2]】:
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
The above are all exact matches, and you can also choose based on some attribute values.
c. Match a word in the word list of attribute value [E[Attr~=Val]]
For multiple attributes separated by spaces value, you need to use the tilde (~) for matching.
[title~=hello]{color:red;} can select
Hello world
, but cannot select.
d. Specific attribute selection type [E[Attr|=Val]]
E[Attr|=Val] selects the attribute Attr And the attribute value of Attr is an element starting with Val or Val-.
*[lang|="en"]{color: red;}can match all elements whose lang attribute is equal to en or starts with en-.
Hello!
Greetings!
G'day!
Bonjour!
Jrooana!
e. Attribute selector using wildcard characters [E[Attr^=Val]][E[ Attr$=Val]][E[Attr*=Val]]
The big boss in the css3 attribute selector makes the selector function improve every minute.
E[att^="val"], the selector matches the element E, and the E element defines the attribute att. The attribute value of att is any string starting with val.
E[att$="val"], the selector matches the element E, and the E element defines the attribute att, and the attribute value of att is any string ending with val.
E[att*="val"], the selector matches the element E, and the element defines the attribute att, and the att attribute value contains "val" anywhere.
These wildcard characters are the same as those in jquery.
For example:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">a[class^=icon]{ background: green; color:#fff;}a[href$=pdf]{ background: orange; color: #fff;}a[title*=more]{ background: blue; color: #fff;}</style></head><body><a href="xxx.pdf">我链接的是PDF文件</a><a href="#" class="icon">我类名是icon</a><a href="#" title="我的title是more">我的title是more</a></body></html>f. Attribute selectors can also be used in HTML5. data attribute, but its use is not recommended.
div[data-myid="123456"]{ background-color: green;}<div id="xxx" name="test" data-myid="123456">div</div>:root is the root selector, matching the root element of the document tree where the element is located, and in the html document, the root element It is html, so :root is equivalent to html.
The following three ways of writing are equivalent:
html:root { background:orange;}:root { background:orange;}html { background:orange;}I don’t know why it says “It is recommended to use: root method” on the Internet, but there is no one. Reason, haha. I have reservations about :root because I really don’t think it’s of any use.
3. Structural pseudo-class selector [:not]:not selector is the same as the :not selector in jquery. It selects all elements except a certain element. It is a relatively easy-to-use selector. .
Notes on using the :not selector:
Note: [:not] must immediately follow the element and cannot have spaces. :not is followed by parentheses, which are not found in attribute selectors.
A useful example: add a red border to the input in the form except the submit button.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">form{ width: 200px; margin: 20px auto;}div{ margin-bottom: 20px;}/*input[type="text"]{ border:1px solid red;}*/input:not([type="submit"]){ border:1px solid red;}</style></head><body><form> <div> <label for="name">昵称:</label> <input type="text" id="name" placeholder="starof"> </div> <div> <label for="password">密码:</label> <input type="text" id="password" placeholder="******"> </div> <div> <input type="submit" value="提交"> </div></form></body></html>: The empty selector represents empty and is used to Select elements without any content. There really is no content at all, and there can be no spaces.
举例：第一个
有文字内容，第二个
只有一个空格，第三个
为空。:empty就可以选中第三个
给它添加样式。
<style type="text/css">p{ background-color: orange; min-height: 30px;}:empty{ background-color: red;}</style><p>我是一个段落</p><p> </p><p></p>?在jquery中empty()和remove([expr])都用来移除元素，但是empty()是移除了指定元素中的所有子节点，仍保留其在dom中所占的位置。$("p").empty()，就会剩下
这样一个空标签，此时就可以用css3中的:empty为其添加样式。remove([expr])则是把其从dom中删除，而不会保留其所占的位置。 五、结构性伪类选择器【：target】：target为目标选择器，用来匹配相关URL指向的元素。
：target是个很有意思的结构化伪类选择器，可以很轻松的实现点一个标题显示内容，而且还可以用#brand:target p{}这样配合选择target下的后代选择器。
举例：简洁版手风琴效果。
这样.accordion :target p{display: block;}一行代码就可以实现手风琴的效果。
<!DOCTYPE HTML><html><head> <meta charset="utf-8" /> <title>css手风琴效果</title> <style type="text/css">.accordion p{ display: none;} .accordion :target p{ display: block;}/*和下面这种写法是等价的*//*#section-1:target p,#section-2:target p,#section-3:target p{ display: block;}; */ </style></head><body> <div class="accordion"> <div id="section-1"> <h2> <a href="#section-1">section-1</a> </h2> <p>第一部分内容</p> </div> <div id="section-2"> <h2> <a href="#section-2">section-2</a> </h2> <p>第二部分内容</p> </div> <div id="section-3"> <h2> <a href="#section-3">section-3</a> </h2> <p>第三部分内容</p> </div> </div></body></html>
MDN相关资料:target
Using the :target selector
六、结构性伪类选择器【first-child】":first-child"选择器表示的是选择父元素的第一个子元素E。
举个例子：对比后代元素，子元素和第一个子元素。
后代元素：选择所有后代。
子元素：只选择第一代。
:first-chid：选择第一代中的第一个元素【这个站在父元素的角度理解的，如果站在元素自身的角度理解就是，如果该元素是其父元素的第一个子元素，就选中，通俗理解就是如果小明是他爸爸的大儿子就选中】。
代码：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>结构性伪类选择器?first-child</title> <style type="text/css"> ul.ancestor li{ background-color: yellow; } ul.ancestor >li{ background-color: green; } ul.ancestor >li:first-child{ color: orange; } </style></head><body> <ul class="ancestor"> <li> <a href="##">Link1</a> 文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色 </li> <li> <a href="##">Link2</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link3</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <ul> <li> <a href="##">Link4</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link5</a> 关注文字颜色，不要关注超链接颜色 </li> <li> <a href="##">Link6</a> 关注文字颜色，不要关注超链接颜色 </li> </ul> </li> <li> <a href="##">Link7</a> 不要关注超链接颜色 </li> </ul></body></html>分析：
说明：ul.ancestor是为了意思更明确这些写的，各位正式写嗲吗只要写.ancestor就好了。
ul.ancestor li：是后代选择器，所以样式会应用到所有的后代li元素，让它们背景色变黄。
ul.ancestor >li:是子选择器，所以样式会应用到第一代li元素，让它们背景色变绿，覆盖前面样式。
ul.ancestor >li:first-child：选择第一代中的第一个li元素，让其文字颜色变为橘色。
补充内容
为什么我要写这句话：文字颜色是橙色，超链接的color被浏览器样式覆盖了，所以才不是橙色。
因为慕课网出的一道题：将无序列表的第一个项目符号设置为红色。答案是ul li:first-child{ color: red;}。导致我以为只能选中项目符号，所以就测试了一下，确实是选择第一代中第一个元素。
有兴趣的可自行测试：
<p style="color:red">文字<a href="#">a</a></p>
效果为：，
原因是浏览器默认样式覆盖了继承自p的color样式。
Note:
看第一眼我以为我以为ul:first-child会是选中第一个li呢，但其真正的含义是，如果ul是它父元素的第一个子元素，就选中加样式。所以避免出错推荐像我这样ul.ancestor >li:first-child非常明确的写出，而不用自己去推测。
:last-child和:first-chld类似，用来选择第一代中最后一个元素，是个很实用的选择器。
举例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>选择器</title><style type="text/css">ul{ list-style-type: none; border:1px solid grey; display: inline-block; padding: 0; width: 200px;}li{ padding: 5px; border-bottom: 3px solid grey;}ul >li:last-child{ border-bottom:none;}</style></head><body><ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li></ul></body></html>
本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
How do I use HTML5 form validation attributes to validate user input?
Mar 17, 2025 pm 12:27 PM
The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
What are the best practices for cross-browser compatibility in HTML5?
Mar 17, 2025 pm 12:20 PM
Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
How do I use the HTML5 <time> element to represent dates and times semantically?
Mar 12, 2025 pm 04:05 PM
This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
