Comments (5)
属性选择器
[attr="value"]
毋庸置疑, 属性值全等 "value"
a[target=_blank]
<a href="http://vno.io" target="_blank">vno's blog</a>
[attr~="value"]
属性值包含独立的单词 "value"
[title~=dog]
会选中
<img src="husky.jpg" title="husky dog">
<img src="teddy.gif" title="dog">
[attr|="value"]
属性值包含起始位置为"value"或"value-"的元素,
如 [data-class|="showme"]
选中
<p data-class="showme">...</p>
<p data-class="showme-something">...</p>
[attr^="value]
attr值以"value"开头的, 类似于重则表达式的匹配
[class^="top"]
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
[attr$="value"]
attr值以"test"结尾的, 类比正则
[class$="og"]
<img src="husky.jpg" title="husky dog">
<img src="teddy.gif" title="dog">
<img src="frog.gif" title="frog">
[attr*="value"]
属性attr值中包含"value"的元素
[data-class*="me"]
<p data-class="me">...</p>
<p data-class="melord">...</p>
<p data-class="showme">...</p>
<p data-class="showmesomething">...</p>
<p data-class="show-me-something">...</p>
from blog.
普通选择器
.className 类名, 以点 . 引导
.top
.nav
footer
#idName id值, 以 # 引导
#userName
#target
tagName html标签名
div
p
from blog.
层次选择器
A, B都为正常选择器(tagName, #idName, #className, [attr]...), 都是通过A的位置定位B
A, B
A或B, 并集选择器
A B
后代选择器 B wrapped in A, 可以有其他elements多层包裹B
A > B
直接后代选择器, 或子选择器, A is parent of B
A + B 紧邻/后邻选择器
, A next to B, B closely behind A,
A ~ B 同级元素
后部兄弟选择器, AB siblings, B behind A
from blog.
伪元素 & 伪类
伪元素
伪元素 | 示例 | 说明 |
---|---|---|
::after | p::after | Insert something after the content of each element |
::before | p::before | Insert something before the content of each element |
::first-letter | p::first-letter | Selects the first letter of every element |
::first-line | p::first-line | Selects the first line of every element |
::selection | ::selection | Selects the portion of an element that is selected by a user |
::placeholder | input::placeholder | Selects input elements with placeholder text |
伪类
伪类名 | 示例 | 说明 |
---|---|---|
:active | a:active | Selects the active link |
:checked | input:checked | Selects every checked element |
:default | input:default | Selects the default element |
:disabled | input:disabled | Selects every disabled element |
:empty | p:empty | Selects every element that has no children (including text nodes) |
:enabled | input:enabled | Selects every enabled element |
:first-child | p:first-child | Selects every element that is the first child of its parent |
:first-of-type | p:first-of-type | Selects every element that is the first element of its parent |
:focus | input:focus | Selects the input element which has focus |
:hover | a:hover | Selects links on mouse over |
:in-range | input:in-range | Selects input elements with a value within a specified range |
:indeterminate | input:indeterminate | Selects input elements that are in an indeterminate state |
:invalid | input:invalid | Selects all input elements with an invalid value |
:lang(language) | p:lang(it) | Selects every element with a lang attribute equal to "it" (Italian) |
:last-child | p:last-child | Selects every element that is the last child of its parent |
:last-of-type | p:last-of-type | Selects every element that is the last element of its parent |
:link | a:link | Selects all unvisited links |
:not(selector) | :not(p) | Selects every element that is not a element |
:nth-child(n) | p:nth-child(2) | Selects every element that is the second child of its parent |
:nth-last-child(n) | p:nth-last-child(2) | Selects every element that is the second child of its parent, counting from the last child |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every element that is the second element of its parent, counting from the last child |
:nth-of-type(n) | p:nth-of-type(2) | Selects every element that is the second element of its parent |
:only-of-type | p:only-of-type | Selects every element that is the only element of its parent |
:only-child | p:only-child | Selects every element that is the only child of its parent |
:optional | input:optional | Selects input elements with no "required" attribute |
:out-of-range | input:out-of-range | Selects input elements with a value outside a specified range |
:read-only | input:read-only | Selects input elements with the "readonly" attribute specified |
:read-write | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
:required | input:required | Selects input elements with the "required" attribute specified |
:root | :root | Selects the document's root element |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
:valid | input:valid | Selects all input elements with a valid value |
:visited | a:visited | Selects all visited links |
from blog.
组合选择器
这类选择器实在太多, 可以按照{ 普通选择器, 位置/层次选择器, 属性选择器 }随意组合
A.B
A#C
A.B#C
A .B
A #C
A .B #C
A .B #C > li
...
from blog.
Related Issues (20)
- HTML: JS: meta-viewport HOT 1
- JS: snake case & camel case HOT 1
- Docker: WordPress, Nginx HOT 2
- Nuxt: [BABEL] Note: The code generator has deoptimised the styling of XXX.js as it exceeds the max of 500KB. HOT 1
- Nginx: Tips HOT 2
- Shell: Tips HOT 1
- Nacos: Tips HOT 2
- Xnix: LVM: Tips
- OS: Ubuntu: apt HOT 1
- OS: Ubuntu: xclip HOT 3
- OS: Ubuntu: user HOT 1
- OS:Ubuntu: Nvidia GPU HOT 5
- OS: Ubuntu: CUDA
- OS:Ubuntu:zshconfig
- Web: blogs
- Network: tools: curl
- PL: node.js: egg.js HOT 2
- FFMPEG: ProRes HOT 1
- Networking: 阿里云: 云解析DNS HOT 3
- Shell: scripts HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blog.