What types of css selectors are there? A brief introduction to common css selectors

This article brings you information about how to use css selectors. What types are there? A brief introduction to commonly used CSS selectors has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

css tag selector

Function: Select all specified elements in the page

Syntax: Tag name: {}

id selector

Function: drill the only element in the element through its id attribute value

Syntax: #id{}

css Class selector

Function: Select a group of elements through the element's class attribute value

Syntax: .class attribute value{}

can be set for one element at the same time Multiple class attribute values, separated by spaces

Selector grouping (union selector)

Function: Selector grouping can be used at the same time Select elements corresponding to multiple selectors

Syntax: Selector 1, Selector 2, Selector N{}

Example: Select the id as p3, and the class attribute value contains p2 and h1 tags

                 #p3,.p2,h1{
                                  background-color: yellow;
                            }

css wildcard selector

Function: Select all elements on the page

Syntax: *{}

css intersection selector (composite selector)

Function: You can select elements that satisfy multiple selectors at the same time

Syntax: Selector 1 Selector 2 Selector N{ }

Note: Because id can uniquely determine an element, do not use the intersection selector for id

Example: Select one of the span

span.p4{
                                    background-color:#4169E1;
                           }

elements whose class attribute value contains p4 Relationship between:

Parent element: an element that directly contains child elements.

Child elements: Elements directly contained by the parent element.

Ancestor element: An element that directly or briefly contains descendant elements. The parent element is also an ancestor element.

Descendant elements: Elements that are directly or indirectly contained by ancestor elements, and child elements are also descendant elements.

Sibling elements: Elements that have the same parent element.

css descendant element selector

Function: Select the descendant elements of the specified element

Syntax: Ancestor element descendant element{}

Example: Select span in div

  div span {
                                        color: chartreuse;
                                }

css child element selector (not supported by IE6 and below browsers)

Function: Select the specified parent element Child element

Syntax: Parent element > Child element

Example: Select the span in the div

                 div>span{
                              background-color: yellow;
                     }

Pseudo-class selector is used to represent a special type of element status.

For example: visited hyperlinks, ordinary hyperlinks, and focused text boxes

When we need to set styles for elements in these special states, we can use them The style defined by the pseudo class for the connection

Normal link: a:link

Visited link: a:visited (only color can be defined)

The link that the mouse slides over : a:hover

The link being clicked: a:active

The order between a:link and a:visited is not specified, but they must be in front of a:hover and a:active , a:hover must be in front of a:active

hover and active can also be set for other elements such as p:hover p:active, but ie6 and below do not support it

Other pseudo Class:

:focus Get focus

:before Before the specified element

:after After the specified element

::selection The selected element ( This should be used in Firefox::-moz-selection)

Use pseudo-elements to represent some special positions in the element

:first-letter: the first character

:fist-line : The first line of characters

:before : Represents the front part of the element

Generally, before needs to be used in conjunction with the content style,

You can add some content to the position of before or after through content

:after : represents the last side of the element

Set the first character in the p tag to yellow 25px

   p:first-letter{
                        color:yellow;
                        font-size: 25px;
                    }
                   p:first-line{
                       background: #FF0000;
                   }
                  将content的内容添加到p元素的最前面
                   p:before{
                       content: "ABC";
                   }
                   将content的内容添加到p元素的最后面
                   p:after{
                       content: "DEF";
                   }

css attribute selector

Function: You can select the specified element based on the attribute or attribute value in the element

Syntax: [Attribute name] selection Elements with specified attributes

[Attribute name=Attribute value]Select elements with specified attribute values

[Attribute name^=Attribute value]Select elements whose attribute values ​​start with the specified content

[Attribute name$=Attribute value]Select elements whose attribute value ends with the specified content

[Attribute value*=Attribute value]Select elements whose attribute value contains the specified content

    /*为具有title属性的p元素设置背景颜色*/
                p[title]{
                     color: darkorchid;
                }
                /*为title属性值为hello的元素设置一个背景颜色*/
                p[title=hello]{
                     background-color: cornflowerblue;
                }
                /*为title属性是ab开头的元素设置一个背景颜色*/
                p[title^="ab"]{
                     background-color: chartreuse;
                }
                p[title$="d"]{
                     font-size: 28px;
                }

Pseudo-class child element selector

:first-child: The first child element can be selected

:last-child: The last element can be selected

:nth-child : You can select a child element at any position

You can specify a parameter after this selector to specify which element to select

even: even number

odd: odd number Similar, but xxx-child selects from all elements, xxx-of-type selects from the specified type

Example: Select the first p tag

p:first-child{
                           color:coral;
                      }
                     选中第3个p标签
                     p:nth-child(3){
                           color:chartreuse;
                     }
                     设置表格奇偶行背景颜色不同
                     tr:nth(even){
                                background-color:pink; 
                     }
                    
                     tr:nth(odd){
                                background-color:skyblue; 
                     }

and select the next sibling element Device

Function: You can select the specified sibling element immediately after an element

语法：前一个+后一个

例：选中p标签后的相邻的兄弟span（p和span不一定相邻）

  p+span{
                                     color:red;
                            }

选中后边的所有兄弟元素

语法：前一个~后边所有

否定伪类：

作用：从选种的元素中剔除某些元素

语法： :not(选择器)

例：为所有的p元素设置一个背景颜色，出了class为hello或hello2的元素

              p:not(.hello):not(.hello2){
                                  background-color: antiquewhite;
                          }

相关文章推荐：

什么是css？css三种样式以及文字属性的介绍

CSS布局有哪些？css常见的布局方式（附代码）

The above is the detailed content of What types of css selectors are there? A brief introduction to common css selectors. For more information, please follow other related articles on the PHP Chinese website!