css3 selector (Part 1)

1、给导航加分割线，左右

 .nav li::before,.nav li::after{

            content:"";

            position:absolute;

            top:14px;

            height:25px;

            width:1px; 

        }

     

        .nav li::before{

            left:0;

            background:-webkit-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#ffffff,#f06254);

            background:linear-gradient(to bottom,#f06254,#ffffff,#f06254);

        }

        .nav li::after{

            right:0;

            background:-webkit-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-moz-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-o-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:-ms-linear-gradient(to bottom,#f06254,#bf554c,#f06254);

            background:linear-gradient(to bottom,#f06254,#bf554c,#f06254);

        }

        

        

         .nav li:first-child::before{ background:none;}

         .nav li:last-child::after{ background:none;}

 

2、

 

html代码：

 

我链接的是PDF文件

我类名是icon

我的title是more">我的title是more

 

css代码  

 

a[class^=icon]{

  background: green;

  color:#fff;//定义以icon开头的任何字符串

}

a[href$=pdf]{

background: orange;

color: #fff;define hrefany string ending with pdf

}

a[title*=more]{

background: blue;

color: #fff;Any string defined with title

}

For example:

a[class^=column]{

background:#fc0001;

       }

a[href$=doc]{

background:#007d02;

}

a[title*=box]{

background:#0000fe;

}

I want to make my background red

I want to make the background red

I want to make my background red

I want to make the background green

I want to make the background green

I want to make the background blue

I want to make the background blue

I want to make the background blue

3、

Structural pseudo-class selectorroot

:rootselector, literally we can clearly understand it as the root selector,

He means to match the root element of the document where the element E is located. In a HTML document, the root element is always

The

(":root" selector is equivalent to the element, to put it simply:

:root{background:orange}

html {background:orange;}

The effect obtained is the same.

It is recommended to use the :root method.

In addition, under IE９, you can also use “:root” to implement the hack function. )

4、

Structural pseudo-class selector—not

:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成：form {

input:not([type="submit"]){

  border:1px solid red;

}//意思是除了type=submit意外的input边框为红色

 

 

 

5、结构性伪类选择器—empty

:empty选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格。

比如说，你的文档中有三个段落p元素，你想把没有任何内容的P元素隐藏起来。我们就可以使用“:empty”选择器来控制。

HTML代码：

我是一个段落

 

​

CSS代码：

p{

 background: orange;

 min-height: 30px;

}

p:empty {

  display: none;

}​

6、结构性伪类选择器—target

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。

例:

Brand

  content for Brand

Brand

 content for jake

Brand

    content for aron

cssCode:

#brand:target {

background: orange;

color: #fff;

}

#jake:target {

background: blue;

color: #fff;

}

#aron:target{

background: red;

color: #fff;

}

7, structural pseudo-class selector—first-child

":first-child"The selector means selecting the element E that is the first child element of the parent element. A simple understanding is to select the first child element in the element. Remember that it is a child element, not a descendant element.

HTMLCode:

1. Link1
2. Link2
3. link3

CSSCode:

ol > li:first-child{

color: red;

}//The first sequence number of html turns red. If it is an unordered list, the sequence icon on the front end changes color

First-child is exactly the opposite of last-child

8, structural pseudo-class selector—nth-child(n)

The ":nth-child(n)" selector is used to locate one or more specific child elements of a parent element. Where "n" is its parameter, and it can be an integer value (1,2,3,4), or an expression (2n+1, -n+5 ) and keywords (odd, even), but the starting value of parameter n is always 1, not 0. In other words, when the value of parameter n is 0, the selector will not select any matching elements.

HTMLCode:

1. item1
2. item2
3. item3
4. item4

​

CSSCode:

ol > li:nth-child(2n){

background: orange;

} //Pass the ":nth-child(n)" selector, and the parameter uses the expression "2n" to set the even row list background color to orange.

9, structural pseudo-class selector—nth-last-child(n)

The

":nth-last-child(n)"selector is very similar to the previous ":nth-child(n)"selector, except that there is one more "last", The function is different from the ":nth-child(n)"selector. It starts from the last child element of a parent element to select a specific element

ol > li:nth-last-child(5){

background: orange;

}//Select the fifth to last list item in the list and set its background to orange.

10, first-of-typeselector

":first-of-type"selector is similar to ":first-child"selector, the difference is that specifies the type of element, it is mainly used to locate a certain element under a parent element The first child element of a type.

Position the first p element in the div container via the ":first-of-type" selector (p is not necessarily the first child in the container element) and set its background color to orange.

.wrapper > p:first-of-type {

background: orange;

//last-of-typeselector

The

":last-of-type"selector has the same function as the ":first-of-type"selector. The difference is that it selects the last child element of a certain type under the parent element. .

11, nth-of-type(n)selector

The

":nth-of-type(n)"selector is very similar to the ":nth-child(n)"selector, except that it only counts children of a certain type specified in the parent element element. When the child elements in an element are not only child elements of the same type, use the ":nth-of-type(n)"selector to locate a certain type of child elements in the parent element. Very convenient and useful. "n" in ":nth-of-type(n)"selector and ":nth-child(n)""n" in selector The same goes for parameters, which can be specific integers, expressions, or keywords.

Example: .wrapper > p:nth-of-type(2n){

background: orange;

} Set the background of the even number of segments in the container "div.wrapper" to orange through the ":nth-of-type(2n)"selector.

18, nth-last-of-type(n)selector

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。

通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。

.wrapper > p:nth-last-of-type(3){

  background: orange;

}

 

12、only-child选择器

“:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

示例演示

通过“:only-child”选择器，来控制仅有一个子元素的背景样式，为了更好的理解，我们这个示例通过对比的方式来向大家演示。

HTML代码：

  

我是一个段落

  

我是一个段落

  

我是一个段落

CSSCode:

.post p {

background: green;

color: #fff;

padding: 10px;

}

.post p:only-child {

background: orange;

}

13, only-of-typeselector

":only-of-type"The selector is used to select an element that is the only child element of the same type as its parent element. This may not be easy to understand, let’s put it another way. ":only-of-type" means that an element has many sub-elements, and only one type of sub-element is unique. Use the ":only-of-type" selector You can select the only type sub-element in this element.

Example Demo

Use the ":only-of-type" selector to modify the background color of only one div element in the container to orange.

HTMLCode:

I am a paragraph

I am a paragraph

I am a paragraph

I am a Divelement

I am a Div

      

• I am a list item

I am a paragraph

CSSCode:

.wrapper > div:only-of-type {

background: orange;

}