Detailed knowledge about css selector-CSS Tutorial-php.cn

Detailed knowledge about css selector

迷茫

Release： 2017-03-25 14:01:41

Original

1514 people have browsed it

Methods to import external css style sheets

Use the link tag to import external css style sheets
<link rel="stylesheet" href="css/demo01 .css">
##import (import) external style sheet in the style sheet

@import url("/crazy-html5/06css/css /demo01.css");

Use internal style sheets

Internal style sheets can only be applied to a certain web page and are defined in

headAdd the style tag to the head, and you can add the page style in the style tag.

<head>
    <style>
        table {
            background: #003366;
        }
    </style>
</head>

Copy after login

Selector knowledge points

Element attribute selector

Ordinary tag selector

table:{background:red; }
#A tag containing a certain attribute

p[id]{background:red;}Represents a p element containing an id attribute
A tag that contains an attribute and the attribute value is a specific value

p[id=aaa]{background:red;} means it contains the id attribute, and the id =p element of aaa
An element that contains an attribute and the attribute value starts with a specific value

p[id=^aaa]{background:red;}Indicates an element containing an id attribute, and the value of the id is a p element starting with aaa
An element containing a certain attribute and the attribute value ends with a specific value

p [id=$c]{background:red;} means that it contains the id attribute, and the value of id is a p element ending in c

ID selector

id selector, specify the element whose id is a specific value. For example,

#myp represents the element whose id is myp. The id selector must be preceded by Add the symbol

#Class selector

The class selector is an element that matches the class value. The symbol

. must be added in front of the selector, such as .myclass represents all elements whose class value is myclass.

Class selectors can be used in conjunction with element selectors, for example

p.important{color:red;}Elements that must meet both selector conditions can take effect.

Contains selectors and descendant selectors

The descendant selector can select elements that are descendants of an element, for example:

h1 em{color:red}, this rule will Turn the text of the em element that is a descendant of the h1 element into red. Other em text will not be affected by this rule.

Child selector

is similar to the descendant selector, but will only act on a direct descendant of the element. For example,

h1>strong{color:red;} acts on the first-level strong element in the h1 element, and other levels are not affected

Adjacent sibling selector

If you need to select an element immediately after another element, and both have the same parent element, you can use the adjacent sibling selector, such as

h1+p {margin-top:50px;}Select the paragraph that appears immediately after the h1 element. The h1 and p elements have the same parent element

Selector grouping

Applies to multiple elements at the same time A selector for an element, such as

h2,p{color:gray;}, will act on both the h2 element and the p element. * is a wildcard selector that can match any element

Pseudo element selector

:first-line{color:red;}Set a special style for the first line of text
:first-letter{color:red;}Set a special style for the first letter of text

:after, :beforeUnselector

:before{}Can be used to insert content in front of the element content, and the content is availablecontent is specified,
:after{} can be used to insert content after the element content, and the content can be specified with content, such as

p:before{
    content:url("img.png");}

Copy after login

after, before can be used with quotes, quotes can be used with to set the quote type of nested quotes

<style>
    p>p {
        quotes: "《" "》"
    }
    p>p::before{
      content: open-quote;
    }
    p>p::after{
      content:close-quote;
    }</style>

Copy after login

after, before Use with the counter to add multi-level numbers in front of the text. This can be a special article, and I won’t go into details here.

Pseudo-class selector

:rootThe selector matches the document root element
:first-childSpecifies the style when the element is the first child of its parent
:last-childSpecifies the style when the element is the first child of its parent The style of the last child of the parent
##:nth-child(n)
Specifies the style when the element is the nth child of its parent

odd
Matches the style when the element is an odd number of children of its parent
even
Matches when the element is an even-numbered child of its parent Style
m*n+p
Matches when the element is Its parent conforms to the style of the m*n+p child

:nth-last-child(n)
Specifies when the element is its parent The style of the nth child from the last level
Specifies that it takes effect when the element is the only child element of its parent
Specify the style of empty elements

Pseudo-class selector for element state

:hoverStyle when the mouse pointer is on the element
:focusThe style of the element that receives focus
:enabledThe style of the enabled element
:disabledThe style of the disabled element
:checkedThe style of the selected element (checkbox, radio )
::selectionThe style of some elements selected by the user
:not(selector)Select a style that is not this selector
##:targetSelect the currently active #news element, generally used with anchor points

The above is the detailed content of Detailed knowledge about css selector. For more information, please follow other related articles on the PHP Chinese website!