Home > Developer > Web Develop
In some markup languages, the class name and the ID selector cannot be used, so CSS2 introduces the property selector.
3. Attribute selector a) chooses the property based on whether it existsIf you want to select an element that has a property, for example, to select all the H1 elements that have a class attribute, so that the text is silver, you can write:
b) Select according to the specific attribute value/* Select based on a single attribute */
h1[class]{ Color:sliver;}
/* can also be selected based on multiple attributes */
h1[class][id]{
Color:yellow;
}
<style>
/* can also use multiple attribute values to select, the second paragraph becomes red */
p[class= ' one '][alt= ' both ']{
color:red;
}
</style>
<body>
<p class= ' One ' > a class attribute </p>
<p class= ' one ' alt= ' both ' > a class attribute plus an ALT attribute </p>
</body>
~=: If a property can accept a word list, it can be selected according to any of these words.
*=word1: Select all elements in the attribute value that contain word1
^=start: Selects all elements in the attribute value starting with start
$=end: Selects all elements in the attribute value that end With end
<style>p[class~= ' Bar ']{Color:Red; }p[class*= ' wo ']{Color:Blue; }p[class^= ' th ']{Color:Yellow; }p[class$= ' ur ']{Color:Purple; }</style><Body> <Pclass= ' OneBar '>One</P><!--Red - <Pclass= ' OneBard '>As contrasted with the previous paragraph</P><!--Default Color - <Pclass= ' bothOK '>Both</P><!--Blue - <Pclass= ' three '>Three</P><!--Yellow - <Pclass= ' Four '>Four</P><!--Purple -</Body>d) specific attribute selectors
See examples directly:
/* Select the src attribute equal to figure or the element starting with figure-*/img[src|= ' figure ']{ border:1px;}4. Document structure-based selectors
A) descendant selectors-separated by spaces:Select all EM elements in the H1:
H1 em{ Color:gray;}
/* Of course not limited to two selectors, for example: */
/* Set the text color of all EM elements under the P label to Gray */In all span labels below
P Span em{
Color:em
}Select child elements of H1 instead of descendant elements
<style>H1 > Em{Color:Red; }</style><Body> <H1>Sjfsl<span><em>Will not be selected to</em></span><em>Will be selected to</em></H1></Body>c) The next sibling (not a cousin, which has the same parent element) Selector--Use the + sign to separate
<style>p + H1{Color:Red; }</style><Body> <P>First paragraph</P> <H1>Second paragraph</H1><!--Color Red -- <H1>Third paragraph</H1><!--Color is the same-
</Body>
CSS Selectors (2)--attribute selectors and selectors based on element structure relationships
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
