CSS hit targets: child selector, adjacent compatriot selector, and attribute selector

In CSS layout web page development, we also use a very useful selector, which can be used for overall layout Declaration. This is a general selector. See the following code:

The code is as follows:	Copy code
*{ Margin: 0; Padding: 0; }

This type of code generally does not appear multiple times, but only once in the page code, but its function is very powerful, generally, in the computer field, "*" is a wildcard, and its declaration will act on all available elements on the page. You can use it to define basic rules on some pages, such as margin, padding, font-family, font-size, background color background-color, and so on.
Because some browsers do not support or are not well supported, the three selectors described below are not very common. At least the current situation is as follows, but over time, some functions are very useful. We have a simple understanding of the selector, adjacent compatriot selector, and attribute selector.
Child selector
Note the difference between this selector and the descendant selector. child selector only refers to its direct descendant, or you can understand it as acting on the first descendant of the child element. The descendant selector acts on all child elements. The child selector selects the child selector by space, and the child selector selects the child selector by ">". Let's look at the following code:
CSS:

The code is as follows:	Copy code
# Links a {color: red ;} # Links> a {color: blue ;} HTML: <P id = "links"> <A href = "http://www.111cn.net/"> Div + CSS tutorial </a> <A href = "http://www.111cn.net/"> CSS layout instance </a> <A href = "http://www.111cn.net/"> CSS2.0 tutorial </a> </P>

The first link element "Div + CSS tutorial" is displayed in blue, while the other two elements are displayed in red. Of course, your browser may not support such a CSS selector. At the beginning, we also stressed the status quo of incompatibility.
Adjacent compatriot selector
Apart from the child selector and descendant selector above, we may also want to find one of the two siblings. For example, a title h1 element is followed by two paragraph p elements, we want to locate the first paragraph p element and apply the style to it. We can use the adjacent compatriot selector.