Home > Developer > Web Develop

CSS Advanced Selector

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

2016-11-07

"CSS Primer Classic", chapter eighth

1. Property Selector

Selector
SelectorDescription
[attribute] Used to select an element with the specified attribute.
[attribute=value] Used to select an element with the specified attributes and values.
[attribute~=value] Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value] Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value] Matches each element of the property value to the beginning of the specified value.
[attribute$=value] Matches each element of the property value to the end of the specified value.
[attribute*=value] Matches each element of the property value that contains the specified value.

Note: IE (until version 5.5) does not support the property selector.

2. Close relatives Selector

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Notes</title>6     <style>7 Li+li{8 Color:Red;9        }Ten     </style> One </Head> A <Body> -     <ul>  <        binID= "html">Html</Li> the         <LiID= "Java">Java</Li> -        <binID= "CSS">Css</Li> -     </ul> - </Body> + </HTML>

Sibling element: Has the same parent.

Next-of-kin elements: if the second of the source code appears directly after the first, then they are close relatives.

As above, <li> with ID HTML and Java is a close relative element, and Java and CSS <li> is a close relative element, but HTML and CSS <li> is not a close relative element.

Note: the next-of-kin selector makes a choice for situations based on two close relatives, but it applies the declared style to the second of the two.

As a result, the above program only has Java and CSS fonts turned red, and HTML is the default color.

3. About <dl> tags, the kinship selector is used to add or remove borders, fills, and borders.

The <dl> tag defines a definition list.

<dl> tags are used to combine <dt> (define items in a list) and <dd> (describe items in a list).

1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4     <MetaCharSet= "UTF-8">5     <title>Notes</title>6     <style>7 Body{Color:#969;}8 H1{font-size:15px;}9 Dd+dt{Ten Margin-top:10px; One     } A DD+DD{ - Font-style:Italic; - font-size:10px; the     } -     </style> - </Head> - <Body> + <H1>Front-end development</H1> - <DL> +     <DT>Html</DT> A     <DD>Hypertext Markup Language</DD> at     <DD>See also:xhtml</DD> -  -     <DT>Css</DT> -     <DD>Cascading Style Sheets</DD> -     <DD>Css</DD> -  in     <DT>Www</DT> -     <DD>World Wide Web</DD> to </DL> + </Body> - </HTML>

CSS Advanced Selector

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More