css样式选择器

记录一些css的选择器用法。

基础选择器

1. *

* {
 margin: 0;
 padding: 0;
}

所有的元素都应用此样式，一般用在清除某些元素特有属性的场景。

还可以如下使用

#container * {
 border: 1px solid black;
}

2. #x（id选择器）

#container {
   width: 960px;
   margin: auto;
}

3. .X（类选择器）

.error {
  color: red;
}

4. X（标签选择器)

a { color: red; }
ul { margin-left: 0; }

组合选择器

可以将基础选择器进组合 5. X Y（X元素下的Y）

li a {
  text-decoration: none;
}

6. X + Y(X元素下的第一个Y)

ul + p {
  color: red;
}

ul下的第一个p的color为红色

7. X > Y(X元素下的直接子元素)

div#container > ul {
  border: 1px solid black;
}

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

只有第一个ul出现边框

8. X ~ Y(与X的父级相同的所有Y元素)

div ul ~ p {
  color: red;
}

<div id="sib-container">
  <ul>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>
  <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
</div>

p元素会应用color:red

属性选择器

通过元素的一些属性来样式控制

9. x[title] (x标签有title属性)

a[title] {
   color: green;
}

a标签有title的文本是绿色

10. x[href="foo"] (x标签有href且值为foo)

a[href="http://tennetcn.com"] {
  color: #83b348; /* Envato green */
}

11. x[href*="foo"] (x标签有href且值包含foo)

a[href*="tennetcn"] {
  color: #83b348; /* Envato green */
}

12. x[href^="http"] (x标签有href且值以http开头)

a[href*="http"] {
  color: #83b348; /* Envato green */
}

13. x[href$=".jpg"] (x标签有href且值以.jpg结尾)

a[href*="jpg"] {
  color: #83b348; /* Envato green */
}

14. x[data-*="foo"] (x标签以自定义属性data-值为foo)

a[data-filetype="image"] {
   color: red;
}

15. x[foo~="bar"] (x标签foo属性值中有bar且由空格连接)

a[data-info~="external"] {
   color: red;
}
 
a[data-info~="image"] {
   border: 1px solid black;
}

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

伪类选择器

16. x:visited (被单击或已访问的锚定) and x:link (所有的锚定标签)

a:link { color: red; }
a:visited { color: purple; }

17. x:checked (单选按钮或复选框被选中)

input[type=radio]:checked {
   border: 1px solid black;
}

18. x:after/before (在x选中之后或之前)

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix { 
   *display: inline-block; 
   _height: 1%;
}

19. x:hover （光标在x元素上悬浮时）

div:hover {
  background: #e3e3e3;
}

20. x:not(selector) （当x元素不包含某个选择器时）

div:not(#container) {
   color: blue;
}

给div的id不是container赋值样式

21. x::pseudoElement (伪元素选择器)

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

第一行

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

第一个字母

块级元素才会生效

子类型及个数选择器

22. x:nth-child(n) (第n个x元素)

li:nth-child(3) {
   color: red;
}

23. x:nth-last-child(n) (倒数第n个x元素)

li:nth-last-child(2) {
   color: red;
}

24. x:nth-of-type(n) (属于其父元素的第n个x元素)

ul:nth-of-type(3) {
   border: 1px solid black;
}

25. x:nth-last-of-type(n) (属于其父元素的倒数第n个x元素)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

26. x:first-child (第一个x元素)

ul li:first-child {
   border-top: none;
}

27. x:last-child (最后一个x元素)

ul > li:last-child {
   color: green;
}

28. x:only-child (其父元素的唯一子元素)

div p:only-child {
   color: red;
}

div元素下只有一个p元素的时候

29. x:only-of-type (指定属于父元素的特定类型的唯一子元素的每个x元素)

li:only-of-type {
   font-weight: bold;
}

30. x:first-of-type (指定父元素的首个x元素)

p:first-of-type{
  background:#ff0000;
}

来源于以下网址参考整理

https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048 (opens new window)

https://www.w3.org/TR/selectors-3/#attribute-representation (opens new window)