进击 of python
Front-end learning --CSS selector
Each CSS style declaration consists of two parts:
选择器{
样式；
}In the CSS section is the "Selector", "selector" {} indicates the "style" {} action before the object
That which elements of the "style" of the role of the web page
That choice is to be divided into: basic and advanced selectors selector
Foundation selector
Tag selector
Html tag name suggests is a selector code label
Before we learn html, body, h series of labels, p, div, img, and so we can use the tag selector to set the corresponding css style properties
It can select all the elements of the page, rather than a certain element content, so the selected page is common to attribute
For chestnut: all paragraph settings for page size is 12px, the font color is red, font weight is thicker
p{
color:red;
font-size:12px;
font-weight:bold;
}ID selector
ID is like everyone's ID number, as everyone has the identity card, and ID number are not the same
So all of the labels on the page can be set ID, and the ID can not be repeated
#ID选择器名称{
css样式代码;
}note:
1, starting with #
2, in which the ID selector names can be arbitrarily named (best not to play Chinese)
3. The name of the ID must be unique
4, can not begin with numbers
ID is selected by the selector element-specific properties of the page
I would like, me, you have turned purple, it is clear that the tag selector alone to die
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span {
color: red;
}
#span1, #span2 {
color: purple;
}
</style>
</head>
<body>
<p>
<span>百因必有果！</span><span id="span1">你</span>的报应就是<span id="span2">我</span>!
</p>
</body>
</html>Class selector
Class selector is somewhat similar with the id, any label elements can be added class (class)
However, different classes that can be repeated, the "classification" concept, and the same label may carry a plurality of classes, separated by spaces
Such as dogs, cats, hedgehogs belong to the animal, black and white printers and color printers belong to a printer class
Under the same conditions, such as a web page a few labels, such as p, li, a label belong to the same class of active
Then we can represent here <p class='active'></p>the following syntax:
.类选择器名称{css样式代码;}note:
1, the English begin with a dot
2, where the class selector name can be arbitrarily named (best not to play Chinese)
3, can not begin with numbers
Since the class may be repeated to add, and may add a plurality of the same class label
So we use use a class selector must be 公共类the concept of
for example:
For example, there are three identical text
<p>同仁堂</p>
<p>同仁堂</p>
<p>同仁堂</p>Now there is a demand, the first Tongrentang requires text color is green and the font size is 20px
TRT second text color and the text is green thickness thicker
The third Tongrentang default text color is black and the text font size and thickness thicker also 20px
If we use the id selector to write, we look at the code. code show as below:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#p1{
color:green;
font-size:20px;
}
#p2{
color:green;
font-weight:bold;
}
#p3{
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<p id='p1'>同仁堂</p>
<p id='p2'>同仁堂</p>
<p id='p3'>同仁堂</p>
</body>
</html>If we have the concept of public classes, we will find by demand:
p1 and p2 have public property font color is green,
p1 and p3 have public properties font size is 20px,
p2 and p3 have public property font weight is thicker
Then we can set the corresponding class label for each p, as follows:
<p class="lv big">同仁堂</p>
<p class="lv bold">同仁堂</p>
<p class="big bold">同仁堂</p>CSS code:
<style>
.lv{
color:green;
}
.big{
font-size:20px
}
.bold{
font-weight:bold;
}
</style>Then, find significantly more efficient use of the class, can effectively reduce some redundancy code
Senior selector
Descendant selectors
As the name suggests, the so-called offspring, is the father of all descendants (including children, grandchildren, great-grandson etc.)
div p{
css代码样式;
}Use spaces represent descendant selector above represents div is the parent element, and p is a descendant of the div element
Before we explain the div tag when it comes div is a container that can hold anything
In this way we can think of our html structure should look like this:
<div>
<p>Penglin</p>
</div>And we just finished learning basic selectors, we can also named to div
For example <div class="container"></div>, the css to write the following code:
.container p{
color:red;
}That is, all p tags under the container classes are red
Descendant selector
Offspring, only represents his father's own son, only natural son. Use >represents progeny selector
div>p{css代码样式;}Here we must mention, respectively, to get use descendant selectors and descendant selectors of the
There is a three-level menu, the contents of each text list of secondary menu is set to green
<div class="menu">
<ul class="food">
<li>
水果
<ul>
<li>香蕉
<ul>
<li>仙人蕉</li>
<li>西贡蕉</li>
<li>畦头大蕉</li>
</ul>
</li>
<li>苹果
<ul>
<li>红蛇果</li>
<li>烟台苹果</li>
</ul>
</li>
</ul>
</li>
<li>
蔬菜
<ul>
<li>白菜
<ul>
<li>北京青白</li>
<li>山东胶州大白菜</li>
<li>东北大矮白菜</li>
</ul>
</li>
<li>黄瓜
<ul>
<li>春花瓜</li>
<li>架黄瓜</li>
<li>北京刺瓜</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
If you use a descendant selector, perhaps some students can write, in order to save
Directly ul li{color:green;}then we will find that all lists are turned green
Does not meet the demand, because the descendant elements li ul, both selected list of menu level
And a list of selected secondary menu, and select the level menu
If we use descendant selectors, we can write the code here css, css code is as follows
.food>li>ul>li{
color:red;
}
Will find three menu also turned red, this is due to property inheritance css caused, we will explain later
Universal selector
Universal selector is the most powerful option, which uses a number * to indicate its role is to match all html tag element
Use it, we can reset the style of the page to follow the product needs to develop corresponding web page
All text settings page in red:
*{color:red;}Combination selector
When you want to set the same style to multiple tags in html elements
We might think of adding the same class, but if a web page such labels very much?
Is not add the same class name, it became our cumulative work, not easy to develop efficiency
So we can use a combination of selectors to select the following syntax:
For example, a web page h1, span, p font tag set color: gray; font-size: 14px;
h1,span,p{
color:red;
font-size:14px;
}Compare
Tag selector:
h1{
color:red;
font-size:14px;
}
span{
color:red;
font-size:14px;
}
p{
color:red;
font-size:14px;
}Class selector:
.active{
color:red;
font-size:14px;
}
<h1 class='active'></h1>
<span class='active'></span>
<p class='active'></p>Pseudo class selector
Even more interesting is pseudo-class selectors, for example, we give an html tag element in a rollover state to set the font color
a:hover{
color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器的使用</title>
<style type="text/css">
a:hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
In addition more than just a label used in hover, mouse suspension, which follows the "love-hate guidelines", the so-called hate is "LoVe HAte"
/*没有被访问过a标签的样式*/
a:link {
color: green;
}
/*访问过后a标签的样式*/
a:visited {
color: yellow;
}
/*鼠标悬浮时a标签的样式*/
a:hover {
color: red;
}
/*鼠标摁住的时候a标签的样式*/
a:active {
color: blue;
}Note: Use in a page, must in order Link-> visited-> hover> active
For hover, it can be applied not only on a, it can also be used in other tags, such as div, p, li, etc.