Detailed explanation of CSS3 basic selectors_html/css_WEB-ITnose

CSS selector, I think everyone is familiar with it, because they use it every day, but for CSS3 selector, you need to use it Although it is flexible enough, I think it is still difficult for many friends, especially the :nth selector in CSS3. So from now on, let’s put aside the differences between their versions and look at the use of CSS selector from the beginning.

CSS is a language used to render html, xml, etc. on the screen. CSS mainly applies styles to corresponding elements to render relatively applied elements. So it is very easy for us to select the corresponding elements. What's important is how to select the corresponding element. At this time, we need what we call a selector. Selectors are mainly used to determine DOM element nodes in the tree structure of html. I divided the CSS selector into three parts. The first part is the part we commonly use. I call it the basic selector; the second part I call it the attribute selector, and the third part I call it the basic selector. It is called a pseudo-class selector. This part is also the most difficult part to understand and master. Today we will look at the first part - the basic selector. Let’s first look at a commonly used selector list diagram

Let’s first look at how to use the basic selectors in the above table and their functions, for a better explanation Question, first create a simple DOM structure, as follows:

<div class="demo"> <ul class="clearfix"> <li id="first" class="first">1</li> <li class="active important">2</li> <li class="important items">3</li> <li class="important">4</li> <li class="items">5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li id="last" class="last">10</li> </ul> </div>

Add some styles to this demo to make it look better

 .demo { width: 300px; border: 1px solid #ccc; padding: 10px; } li { float: left; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; }

The initial effect is as follows:

1. Wildcard selector (*)

The wildcard selector is used to select all elements, or all elements under a certain element. For example:

 *{ marigin: 0; padding: 0; }

You must have seen a lot of the above code in the reset style file. What it means is that the margin and padding of all elements are set to 0. The other way is to select an element. All elements under:

      .demo * {border:1px solid blue;}

The effect is as follows;

From the above renderings, as long as the element borders under div.demo are added, new style. Wildcard selectors are supported in all browsers.

2. Element Selector (E)

Element selector is the most common and basic selector among CSS selectors. Element selectors are actually elements of the document, such as html, body, p, div, etc. For example, in our demo: the elements include div, ul, li, etc.

li {background-color: grey;color: orange;}

represents the li element of the selected page, and sets the background color and foreground color. The effect is as follows:

All browser supported elements Selector(E).

3. Class selector (.className)

Class selector specifies styles in a way that is independent of document elements. Before using class selector, you need to specify it on the html element Define the class name. In other words, you need to ensure that the class name exists in the html tag so that the class can be selected, such as:

<li class="active important items">2</li>

"active, important, items" means we add the class to li A class name so that the class selector can work properly and better associate the class selector's style with the element.

.important {font-weight: bold; color: yellow;}

The above code means to add a "bold font and yellow color" style to the element with the important class name, such as

class The selector can also be used in conjunction with the element selector. For example, there are many elements in your document that use the class name "items", but you only want to modify the style on the class name of the p element, then you can select like this and Add the corresponding style:

       p.items {color: red;}

The above code will only match all p elements whose class attribute contains important, but will not match any other type of element, including elements with the class name "items". As mentioned above, "p.items" will only apply to the p element and it has a class named "items". Those who do not meet these two conditions will not be selected.

Class selectors can also have multiple class names. As we saw above, there are two or more class names in our li element at the same time, and they are separated by spaces. Then the selector can also use multiple class names. Classes are connected together, such as:

 .important {font-weight: bold;} .active {color: green;background: lime;} .items {color: #fff;background: #000;} .important.items {background:#ccc;} .first.last {color: blue;}

As shown in the above code, the ".important.items" selector can only be used when the element contains both "important" and "items" classes. It works, as shown in the figure:

One thing you need to note is that if one of the class names contained in a multi-class selector does not exist, then this selector will not be found. For example, in this code, the matching element cannot find the corresponding element tag, because there is only one li.first and one li.last in our list, and there is no one called li.first.last. List items:

 .first.last {color: blue;}

All browsers support class selectors, but multi-class selectors (.className1.className2) are not supported by ie6.

四、id选择器（#ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#id),

   #first {background: lime;color: #000;}   #last {background: #000;color: lime;}

上在的代码就是选择了id为"first"和"last"的列表项，其效果如下

ID选择器有几个地方需要特别注意的，第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可以给“test1.html”中定义p的id为"#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

所有浏览器都支持ID选择器。

那么什么时候采用id命名？什么时候采用类命名呢？我个人认为就是关键的一点就是具有唯一性使用id选择器；公用的，类似的使用类选择器。使用这两个选择器时，最好区别大小写。

五、后代选择器（Ｅ Ｆ）

后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E F，前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中：

			.demo li {color: blue;}

上面表示的是，选中div.demo中所有的li元素

所有浏览器都支的后代选择器。

六、子元素选择器(E>F)

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（Ｅ Ｆ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以。

ul > li {background: green;color: yellow;}

上在代码表示选择ul下的所有子元素li。如：

IE6不支持子元素选择器。

七、相邻兄弟元素选择器(E + F)

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。

				li + li {background: green;color: yellow; border: 1px solid #ccc;}

上面代码表示选择li的相邻元素li，我们这里一共有十个li，那么上面的代码选择了从第2个li到 10 个li，一共九个，请看效果：

因为上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面九个li都被选中了，如果我们换过一种方式来看，可能会更好的理解一点：

.active + li {background: green;color: yellow; border: 1px solid #ccc;}

按照前面所讲的知识，这句代码很明显选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个的。如图：

IE6不支持这个选择器

八、通用兄弟选择器（Ｅ ? Ｆ）

通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。比如下面的代码：

			.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

上面的代码所表示的是，选择中了li.active 元素后面的所有兄弟元素li,如图所示：

通用兄弟选择器和相邻兄弟选择器极其相似，只不过，相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素（选中的仅一个元素）；而通用兄弟元素选择器，选中的是元素相邻的后面兄弟元素，这样说起来可能会有迷糊，大家可以仔细看看其相邻兄弟的效果图。

IE6不支持这种选择器的用法。

九、群组选择器（selector1,selector2,...,selectorN）

群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。我们来看一个简单的例子：

.first, .last {background: green;color: yellow; border: 1px solid #ccc;}

因为li.first和li.last具有相同的样式效果，所以我们把他们写到一个组里来：

所有浏览器都支持群组选择器。

上面九种选择器是CSS3中的基本选择器，而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器，同时大家可以在实际应用中把这些选择器结合起来使用，达到目的就行了。那么关于CSS3选择器的第一部分??基本选择器就介绍到这里，有点简单，希望对初次接触CSS的同学有所帮助，下节将介绍CSS3选择器的第二部分??属性选择器，感兴趣的朋友请观注本站的更新。

感谢W3CPLUS提供精彩原文。

欢迎大家加入互联网技术交流群：62329335