What Is an HTML Color Picker?

To use css to implement one-to-one, one-to-many, or many-to-one control of elements in HTML pages, you need to use CSS selectors.

Elements in HTML pages are controlled through CSS selectors.

css selector introduction

What is a selector?

Each css style definition consists of two parts, the form is as follows: [code] selector {style} [/ code] The part before {} is the "selector". The "selector" indicates the role of "style" in {}, that is, which elements of the page the "style" applies to

1.1 css selector 1.1 category selector

Class selector selects based on class name

The front is marked with ".", Such as:

.demoDiv {

color: # FF0000;

}

In HTML, an element can define a class attribute.

Such as:

The font color of this area is red

</ dl>

At the same time, we can define another element:

The paragraph font color is red

Finally, using a browser, we can find that all elements of class demoDiv have this style applied. Includes the dl element and the p element in the page.

In the above example, we have defined a class for both elements, but if there are many elements that will apply this element, defining the elements one by one will cause too much code to be repeated on the page. This phenomenon is called "multi-class disease ".

We can change this definition.

<dl>

The font color of this area is red

</ dl>

At the same time, we can define another element:

The paragraph font color is red

</ dl>

In this way, we just define a class and apply the style to all the elements at the same time.

1.2 css selector 1.2 tag selector

A complete HTML page is composed of many different tags, and the tag selector determines which tags

Use the corresponding CSS style, (you may be in a different position in the big environment, but no matter what, you always

Is wearing the same outfit, this dress is pre-defined by the tag selector, no matter where you go

It's all this clothes) For example, the declaration of the p tag style in the style.css file is as follows:

p {

font-size: 12px;

background: # 900;

color: 090;

}

Copy the code so that the background of all p tags in the page is # 900 (red), the text size is 12px, and the color is # 090 (green)

In the later maintenance, if you want to change the color of the p-tag background in the entire website, you only need to modify

The background property is fine, it's that easy!

1.3 ID css selector 1.3 ID selector

The ID selector can assign specific styles to HTML elements tagged with a specific ID. Selecting an element based on its element ID is unique, which means that the same id can only appear once in the same document page. For example, if you set the id of an element to "navi", then you cannot use the same page The other element ids have been named "navi". Although you will find that even if you name several elements with the same id name, the css selector will still select these elements to apply the style (like the class selector), for the css selector, the id attribute uniqueness does not seem presence. However, for js, it will only select the first of the elements with the same id name. For good programming practice, don't use the same id on the page a second time.

It is marked with a "#" in the front, which can be defined in the style like this:

#demoDiv {

color: # FF0000;

}

Here, the element whose id is demoDiv sets its font color to red.

We define an element on the page and define its ID as demoDiv, such as:

The font color of this area is red

</ dl>

Browse with a browser, we can see that because the color in the area becomes red

Define another area

<dl>

This area has no defined color

</ dl>

Using a browser, as expected, the area has no style applied, so the font color in the area is still the default color of black.

1.4 css selector 1.4 descendant selector

Descendant selectors are also called inclusion selectors. They are used to select the descendants of a specific element or element group. The selection of the parent element is placed first, the selection of the child elements is placed behind, and a space is added in the middle. There are more than two elements in the descendant selector. For multi-level ancestor and descendant relationships, there can be multiple spaces to separate them. For example, if the three elements are id a, b, and c, the descendant selector can be written as #a. #b #c {} form, as long as the selection of ancestor elements is separated by spaces before and after the descendant elements.

Such as:

<style>

.father.child {

color: # 0000CC;

}

</ style>

black

<label class = "child"> blue

Also blue

</ label>

Here we define all elements whose class attribute is father. The class attribute below is child and the color is blue. Descendant selector is a very useful selector. Using descendant selector can locate elements more precisely.

1.5 css selector 1.5 child selector

Please note the difference between this selector and the descendant selector. The child selector refers only to its immediate descendant, or you can understand it as the first descendant of the child element. The descendant selector is applied to all descendant elements. Descendant selectors are selected by spaces, while child selectors are selected by ">", we see the following code:

Example Source Code

CSS:

#links a {color: red;}

#links> a {color: blue;}

HTML:

<a href="#"> Div + CSS tutorial </a>>

<a href="#"> CSS layout example </a>

<a href="#"> CSS2.0 Tutorial </a>

We will see that the first link element "Div + CSS Tutorial" is displayed in blue, while the other two elements are displayed in red. Of course, maybe your browser doesn't support such CSS selectors. We also emphasized the incompatibility at the beginning.

The difference between child selectors (>) and descendant selectors (spaces): both represent the relationship of "ancestor-offspring", but> must be "daddy> son", and the space can be not only "daddy son", but also " "Grandpa" and "Grandpa".

1.6 css selector 1.6 pseudo-class selector

Sometimes you need to apply elements to the style with conditions other than the document, such as mouseover. At this time we need to use pseudo-classes. The following is the pseudo-class definition of the link application.

a: link {

color: # 999999;

}

a: visited {

color: # FFFF00;

}

a: hover {

color: # 006600;

}

/ * Not supported by IE, you can see the effect when browsing with Firefox * /

input: focus {

background: # E0F1F5;

}

Link indicates the style of the link when it is not clicked. Visited indicates the style when the link has been visited. Hover represents the style when hovering over the link.

Pseudo-classes can be used not only in link tags, but also in some form elements, but the application of form elements is not supported by IE, so generally pseudo-classes will only be applied to the link style.

1.7 css selector 1.7 universal selector

The universal selector is indicated by *. E.g:

* {

font-size: 12px;

}

Indicates that the font size of all elements is 12px; at the same time, universal selectors can be combined with descendant selectors.

E.g:

p * {

...

}

Represents that all elements of all descendants of the p element apply this style. But with the descendant selector, it is easy for the browser to fail to parse, such as this:

All text is defined in red

All sub-tags in this paragraph will be defined as blue

All sub-tags in this paragraph will be defined as blue

All sub-tags in this paragraph will be defined as blue

All sub-tags in this paragraph will be defined as blue

In this example, a p tag is nested inside the p tag. At this time, the style may appear to be different from the expected result.

1.8 css selector 1.8 group selector

When several element style attributes are the same, a declaration can be called together, and the elements are separated by commas. Such as:

p, td, li {

line-height: 20px;

color: # c00;

}

#main p, #sider span {

color: # 000;

line-height: 26px;

}

. # main p span {

color: # f60;

}

.text1 h1, # sider h3, .art_title h2 {

font-weight: 100;

}

Using the group selector will greatly simplify the CSS code, combining multiple elements with the same attributes, selecting them by merging the groups, and defining the same CSS attributes, which greatly improves the coding efficiency and reduces the CSS file. volume.

1.9 css selector 1.9 adjacent sibling selector

In addition to the child selector and descendant selector above, we may also want to find one of the two brothers, such as a heading h1 element followed by two paragraph p elements. We want to locate the first paragraph p element. It applies style. We can then use adjacent sibling selectors. Look at the following code:

Example Source Code CSS

h1 + p {color: blue}

HTML

<h1> A very professional CSS site </ h1>

Div + CSS tutorial introduces a lot of knowledge about CSS web page layout.

In the CSS layout example, there are many cases related to CSS layout.

We will see the first paragraph, "Div + CSS Tutorial, introduced a lot of knowledge about CSS web layout." The text color will be blue. The second paragraph is not affected by this CSS style.

The difference between + and ~: similar to the above, both of which indicate brotherhood, but + must be "big brother + second brother", ~ can also be "big brother ~ third brother", "second brother ~ fourth sister"

1.10 css selector 1.10 attribute selector

You can define the css with a method to determine whether a certain attribute of the html tag exists

The attribute selector is matched according to the attributes of the element. Its attributes can be standard attributes or custom attributes;! Ie6, 0 0 1 0
Of course, you can also match multiple attributes at the same time;
[attr]
[title] {margin-left: 10px}
// Select all elements with title attribute;
[attr = val]
[title = 'this'] {margin-right: 10px}
// Select all elements whose attribute title is equal to this [attr ^ = val]
[title ^ = 'this'] {margin-left: 15px}
// Select all elements whose attribute title starts with this [attr $ = val]
[title $ = 'this'] {margin-right: 15px}
// Select all elements whose attribute title ends with this [attr * = val]
[title * = 'this'] {margin: 10px}
// Select the attribute title whose value contains all elements of this [attr ~ = val]
[title ~ = 'this'] {margin-top: 10px}
// The value of the selection attribute title contains all elements with a space-separated word this, that is, the value of title must have the word this and this must be separated by spaces from other words.
[title | = 'this'] {margin-bottom: 10px}
// Select all elements whose value title is equal to this, or all elements whose value starts with this-

1.11 css selector 1.11 pseudo element selector

All pseudo-element selectors must be placed at the end of the selector in which the pseudo-element appears, that is, the pseudo-element selector cannot follow any derived selector, such as: p: first-letter em {} This is illegal, ie6 is not supported

: first-letter, set the first letter style of block elements, inline elements are converted into block elements and inline block elements are also supported;
dl p: first-letter {font-size: 20px}
// Select the first letter or Chinese character of all p elements in the dl element. If the block element is converted to an inline element, it is not supported;
: first-line, style the first text line;
.box .main: first-line {color: # f00}
// Only some attributes allow first-line: all font attributes, color, all background attributes, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height
: before, set the previous style, you can insert the generated content and set the style;
body: before {content: 'The Start:'; display: block}
// Insert the text content 'The Start:' in front of the body element, and set it as a block element: after, set the style after, you can insert the generated content and set its style;
body: after {content: 'The End.'; display: block}
// Insert the text content 'The End.' At the end of the body element and set it as a block element

1.12 CSS selector 1.12 Structural pseudo-class selector

HTML CODE:
1. <dl class = "box">
2. First span 
3. First p 
4. <dl> First dl Strong text </ dl>
5. Second p 
6. <dl class = "ft"> Second dl Second span Third span </ dl>
7. </ Dl>

Structured pseudo-class selectors can be preceded by a colon with another selector as a limit;
Bracketed selectors must have parameters in them;
Matching child elements will also match grandchild elements, because child elements are the parent elements of grandchild elements;

The following! Lte8 means that IE8 browsers do not support it, including IE8.

: first-of-type, select the first of the same type of child elements in the relative parent element,! lte8
.box: first-of-type {color: # f00}
// Match 2.3.4 and the first span in strong 4 and 6 because this span is the first span child element in 6.box .ft: first-of-type {color: # ff0}
// Matches the strong in 3 and 4, because 3 is the first p in the box and class = ft, while 4 has only one strong and class = ft, and 5 and 6 although class = ft But they are not the first of their kind relative to the box;

: last-of-type, select the last of the same type of child elements in the relative parent element,! lte8
.box: last-of-type {color: # f00}
// match 2.5.6 and the strongest in 4 and the last span in 6

: only-of-type, select the element that has only one child element of the same type in the relative parent element,! lte8
.box: only-of-type {color: # f00}
// Matches strong in 2 and 4, the class is only one element of the same type in the box, only the span
.box .ft: only-of-type {color: # f00}
// match only strong in 4
: only-child, the selected element is the only child element relative to its parent element,! lte8
.box: only-child {color: # f00}
// match only strong in 4

: nth-child (n), select the nth child element or multiple child elements of its parent element, the index starts from 1, and the index starts from 0 when n is used in the expression! lte8
.box: nth-child (3) {color: # f00}
// Match the third child element which is 4 here
.box: nth-child (odd) {color: # f00} is equivalent to .box: nth-child (2n + 1) {color: # f00}
// Match the odd number which is 2.4.6 here and the first span in strong 4 and 6
.box: nth-child (even) {color: # f00} is equivalent to .box: nth-child (2n + 2) {color: # f00} and .box: nth-child (2n)
// Match the even number which is the second span in 3.5 and 6 here
.box: nth-child (n + 1) {color: # f00}
// Match all child elements starting from n + 1, that is, all child elements and descendants in .box, because here n starts from 1.
n = 0 ----> n + 1 = 0 + 1 = 1, which is 2 here
n = 1 ----> n + 1 = 1 + 1 = 2, which is 3 here
...
n = 4 ----> n + 1 = 4 + 1 = 5, which is 6 here

: nth-last-child (n), similar to using: nth-child (n), except that the index is counted from the end to the front,! lte8
.box: nth-last-child (3) {color: # f00}
// Match the third-to-last child element, which is 4 here

: nth-of-type (n), select the nth or more child elements of the same type of the parent element,! lte8
.box: nth-of-type (2) {color: # f00}
// match 5 and 6 and the second span in 6

: nth-last-of-type (n), same as above, but counting from the end,! lte8
.box: nth-last-of-type (2) {color: # f00}
// match 3 and 4 and the first span in 6

: first-child, select the first child element in the parent element,! ie6
.box: first-child {color: # f00}
// match the strong in 2 and 4 and the first span in 6

: last-child, select the last child element in the parent element,! lte8
.box: last-child {color: # f00}
// Match the last span in 6 and 6 and the strong in 4

: root, select the root element of the document, which is the <html> tag in HTML,! lte8
: empty, select elements without any content, even if there is a space,! lte8
table td: empty {background-color: #ffc}
// match td with no content in the table
: target, select the currently active element, which refers to the element that jumps to when the anchor point is clicked,! lte8
: not (selector), select all elements except selector,! lte8
.box *: not (dl) {background-color: #ffc}
// Select all descendant elements except dl in the box. If there are other non-dl elements in dl, it will also be selected. The above HTML CODE will select span and strong in dl

1.13 UI CSS selector 1.13 UI element state pseudo-class selector

: enabled, specify the style when the element is available, generally used for input, select and textarea
: disabled, specify the style when the element is unavailable, generally used for input, select and textarea

: read-only, specify the style when the element is read-only, FF is -moz-read-only, generally used for input and textarea
: read-write, specify the style when the element is only writable, FF is -moz-read-write, generally used for input and textarea
: checked, specifies the style when the element is selected. FF is -moz-checked. It is generally used for checkbox and radio.
: default, specify the style selected by default for the element, generally used for checkbox and radio
: indeterminate, specify a default set of styles that are not selected in a single selection or check. As long as one is selected, the style is canceled. Generally used for checkbox and radio
:: selection, specify the style when the element handles the selected state, can be used for all elements, the above are basically only used for form elements;! lte8
FF is ::-moz-selection and cannot be written with a group selector;
:: selection {background-color: #ffc; color: #fff}
::-moz-selection {background-color: #ffc; color: #fff}

css selector considerations

Because the interpretation of CSS is top-down, the same attribute description of an element will be overwritten by the attribute description placed above, so we must pay attention to the writing order in the selection of elements, such as:

a: visited {color: # 00FF00; text-decoration: none}
a: hover {color: # FF00FF; text-decoration: underline}

With this writing order, no matter whether the link has been visited or not, as long as the mouse moves over the link, the link will turn blue and underlined. However, if you use the following writing order:

a: hover {color: # FF00FF; text-decoration: underline}

a: visited {color: # 00FF00; text-decoration: none}

If the link has been visited, it will not turn blue and underline when you move your mouse over the link, it will remain green.

^[1]