Common CSS selectors
CSS selectors role is to identify a particular class of elements from the HTML page, and commonly used CSS selectors following categories, with a look!
A wildcard selector
Wildcard common selector '*' sign indicates, it is all selectors in the widest scope, the pages can match all the elements.
Basic syntax: * {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
Examples of
using the selected style is defined, all the clearance margin default HTML tags.
*{
margin：0； /*定义外边距*/
padding：0； /*定义内边距*/
}
But the actual development does not recommend the use of wildcard selectors, because it sets the pattern of effect on all of the HTML tags, regardless of whether the style mark, but reduces the execution speed of the code.
Second, the tag selector
The tag selector means with the HTML tag name as a selector, classified by tag name, specify the unified CSS style for the page in some sort of label.
Basic syntax: tag name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
All HTML tags as a tag name can be selected, for example a, body, p, h1 and the like. The label defined style selector valid for all tags in the page type.
Examples of
p-selected HTML page define styles for all paragraphs.
p{ font-size: 12px; color: #666; font-family:"微软雅黑"; }
The biggest advantage is the quick tag selector for the page in the same type of labeling of style, and this was also its shortcomings, can not be differentiated design style.
Third, the class selector
Class selector uses ** '.' ** (dot English) is identified, followed by the class name.
Basic syntax: class name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
The grammar, the class name is the class attribute value of HTML elements, most HTML element can define a class attribute.
example
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>类选择器</title>
6 <style type="text/css">
7 .red{color: red;}
8 .green{color:green;}
9 .font22{font-size:22px;}
10 p{ text-decoration:underline; font- family:"微软雅黑"; }
11 </style>
12 </head>
13 <body>
14 <h2 class="red">二级标题文本</h2>
15 <p class-"green font22">段落文本内容</p>
16 <p class="red font22">段落二文本内容</p>
17 <p>段落三文本内容</p>
18 </body>
19 </html>
The biggest advantage class selector element object can be defined as a separate or the same style, and a plurality of marks may be used with a class name, the same may be implemented as different types of labels specified style. Meanwhile, an HTML element may be multiple class categories, a plurality of patterns, separated by spaces case requires a plurality of class names, codes as described in the previous two <p>markers.
Note: the class name of the first character can not use numbers, and strictly case-sensitive. Generally use lowercase English characters.
Four, id selector
** id selector uses '#' ** are identified, followed by the id.
Basic syntax: #id name {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
The syntax, id name is the id attribute value of HTML elements, most HTML elements can be defined id attribute, id value elements are unique and can only correspond to a document on a specific element.
example
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>id选择器</title>
6 <style type="text/css">
7 #bold{font -weight:bold; }
8 #font24 {font-size:24px; }
9 </style>
10 </head>
11 <body>
12 <pidf"bold">段落1: id="bold",设置粗体文字。</p>
13 <p id="font24">段落2: id="font24", 设置字号为24px。</p>
14 <p id="font24">段落3: id="font24", 设置字号为24px。</p>
15 <pid="bold font24">段落4: id="bold font24",同时设置粗体和字号24px。</p>
16 </body>
17 </html>
Note: do not allow the same id used in multiple tags, although many browsers and does not complain, but a scripting language such as JavaScript errors when calling id. Further, id does not support the selected class as defined above selector plurality of values.
V. attribute selector
Attribute selectors may have set the style for the specified attribute of the HTML element, not just class and id attributes.
Syntax: [tag name] {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
Note:! Only when the specified DOCTYPE, IE7 and IE8 support attribute selectors only. In IE6 and earlier versions, does not support the selected property.
CSS Selector Reference Manual:
| Selector | description |
|---|---|
| [attribute] | For selecting elements with the specified attribute |
| [attribute=value] | For selecting elements with the specified attributes and values |
| [attribute~=value] | Selecting the property value for the element containing the specified words |
| [attributeI=value] | For selecting attribute values of elements having to begin with a specified value, this value must be a whole word |
| [attribute^=value] | Matching attribute value of each element begins with the specified value |
| [attribute$=value] | Matching attribute value with the specified value at the end of each element |
| [attribute*=value] | It includes the specified attribute value matching the value of each element |
example
1, set the style for all elements with title attribute:
[title]
{
color:red;
}
2, for the title = "W3School" all the elements of style settings:
[title=W3School]
{
border:5px solid blue;
}
3, the style set containing all the elements to the specified value of the title property. It applies to attribute values separated by a space:
[title~=hello] { color:red; }
4, all elements with the style set lang attribute contains the specified value. Attributes for values separated by a hyphen:
[lang|=en] { color:red; }
5, set the form style
attribute selector is particularly useful when the sheet is not provided with the style or class id of:
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
Use attribute selector can specify only one property of the element, can also specify the attribute value of an attribute and its corresponding element simultaneously.
Sixth, and set the selector
And the selector is set to match simultaneously a plurality of selectors, take the set and a plurality of selectors, selectors separated by commas, such as em, strong {}.
Syntax:
tag name of a tag name 2 {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="https://www.cnblogs.com/jizuiku"/>
<title></title>
<style type="text/css">
span,div, .content {
color:darkorange;
}
</style>
</head>
<body>
<span>博客园</span>
<div>给最苦</div>
<p class="content">网页设计</p>
</body>
</html>
And set the selector has the advantage that a plurality of the tags extracted out of the same style, collective statements, optimized code for easy reading.
Seven descendant selectors
Descendant selectors also known offspring include a selector for selecting a particular element. The .asideNav li {}, represents a first selector matches the second element and belonging to the first selector.
Syntax:
Label Label Name 1 Name 2 {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
In CSS, the offspring is based on the HTML document DOM context to decide. Nesting occurs when an element, the element becomes the inner layer descendant element. The element B is embedded inside the elements A, B A is the progeny. Moreover, offspring B of A is the offspring, like family relationships.
Defining descendant selector, EDITORIAL outer element, the inner element written on the back, separated by a space. Descendant selectors will affect all levels of its offspring, there is no level restriction. Such as:
div p { color: red; }
Above selector, div ancestor element p elements for future generations, whose role is to select all descendants of the div element p elements, regardless of p element is a child of the div element, or elements of the relationship between grandchildren deeper, will be selected . In other words, no matter how many generations of descendants p is the div, p elements in the text will turn red.
example
Descendant selectors spaces, is used to represent the descendant hierarchy, of course, is not limited to two. If necessary, start from either an ancestor element, that element until want to apply the style, it can be put descendant selectors chain. Such as:
<ul>
<li><a href="/home/">首页</a></li>
<li><a href="/new/">新房</a></li>
<li><a href="/esf/">二手房</a></li>
<ul>
<li><a href="/sale/">出售房源</a></li>
<li><a href="/buy/">求购房源</a></li>
</ul>
<li><a href="/rent/">租房</a></li>
</ul>
The navigation menu, if you want all anchor text font size is 16px, you can select all elements by descendants ul descendant selectors ul a, because descendant selectors will affect all levels of its offspring. Such as:
ul a {
font-size: 16px;
}
If they want the anchor text of the second level list item font size is 12px, you can ul descendant selectors this multilayer offspring of a relationship through ul.nav, select only the second stage anchor text list items.
ul li a {
font-size: 12px;
}
Of course, this can also be written descendant selectors ul, li, ul, li, a, to achieve more precise control.
Note:
1, includes descendants of the son, grandson, as long as the label is placed in the designated offspring are.
2, the tag name may not 1,2, can also be used id and class name, and each class is selected by id.
3, the selector can be infinitely derived progeny.
Eight progeny selector
Progeny selector uses ** '>' ** expressed as ul> li {}, which matches the second selector and the first element is a descendant selector.
Syntax:
tag name 1> {2 tag name Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
example
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例</title>
<style>
#box>p{
color: darkorange; /*设置颜色为 深橙色*/
font-size: 80px;
}
</style>
</head>
<body>
<div id="box">
<div>
<div>
<div>
<p>
狸花猫
</p>
</div>
</div>
</div>
<p>
大橘猫
</p>
</div>
</body>
</body>
</html>
Note:
1, only to find his son, will not find other nested tags.
2, the sub-element selector may use other id and class selector to find it. 3, sub-element selectors can also> symbol continue.
Nine, sibling selector (+ and -)
Adjacent Sibling + sign selector uses, such as p + a {}, which matches the first selector and immediately match the second selector element, such as immediately after the elements of a p elements.
If you need to select another element immediately after the element, and both elements have the same parent, sibling may be used adjacent the selector.
Syntax: name tag name tag 2 1 + {Attribute 1: 1 Property Value; Attribute 2: Property Value 2;}
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 + p {
margin-top:50px;
color:red;
}
</style>
</head>
<body>
<p>This is paragraph.</p>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>
Brothers only affects the following p style tag does not affect the above brothers style.
Note that the meaning of '+' heel 'and' not the same meaning, the selector brother style is applied to the sibling elements, the style elements has nothing to do with the reference, the above embodiment only affect the pattern p elements, without affecting h1 tag style.
When two brothers are the same elements, it will look to achieve a cycle:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
li + li {
color:red;
}
</style>
</head>
<body>
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
</body>
</html>
And ~ Selector: Find all action is behind a sibling of a specified element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h1 ~ p{
color:red;
}
</style>
</head>
<body>
<p>1</p>
<h1>2</h1>
<p>3</p>
<p>4</p>
<p>5</p>
</body>
</html>
X. dummy selector
dummy selector is a special selector, it is divided into two kinds of pseudo-class selectors and pseudo object selectors.
Pseudo-class selector:
the CSS provides five basic pseudo class selectors, five states corresponding HTML tags.
| Pseudo class selector | effect | Application Object |
|---|---|---|
| :hover | When the flag pattern is defined mouseover (across) | All display marks |
| :link | Custom tag styles in a state of hyperlinks | a label |
| :focus | Marker style defined in obtaining the focus | a label (IE browser does not support) |
| :visited | Style definitions to be accessed after the mark | a label |
| :active | Custom tag style at the selected time | a label |
example
The following is a label 5
<a href="#" id="a1">链接1</a>
<a href="#" id="a2">链接2</a>
<a href="#" id="a3">链接3</a>
<a href="#" id="a4">链接4</a>
<a href="#" id="a5">链接5</a>
Add some CSS styles:
a{
padding: 10px;
color:black; /*初始颜色全为黑色*/
font-weight: bold;
}
#a1:hover{
color:red; /*当鼠标悬停时链接1变成红色*/
}
#a2:link{
background-color: blue; /*给链接2添加蓝色的背景色*/
}
#a3:focus{
color:yellow; /*当链接3获取焦点时变为黄色,失去焦点时恢复黑色*/
}
#a4:visited{
color:green; /*被访问过后的链接4变为绿色*/
}
#a5:active{
background-color: blue; /*鼠标点击的那一瞬间给链接5添加蓝色的背景*/
}
In addition to these five basic pseudo-class selectors, CSS also supports such as: pseudo-class selectors language selection, etc. ":: first-child" first element selector and "lang ()".
2. pseudo object selector
pseudo object selectors define partial pattern elements inside the object.
| Pseudo object selector | effect |
|---|---|
| :first-letter | The first character style definition text |
| :first-line | The first line of custom text styles |
| :before | Before defining the style of the object content |
| :after | After defining the style of content objects |
example
<p>我是文本我是文本我是文本我是文本</p>
Use: after after Style: before and:
p:before{
content:'我说：“';/*在文本前面追加内容*/
color:red;
}
p:after{
content:'。”我说完了！';/*在文本结尾追加内容*/
color:red;
}
These are the common CSS selectors you, you remember it?^_^
