英文教程:五种CSS选择器类型
日期：2014-02-06 浏览次数：21182 次
网页制造aiyiweb文章简介：英文教程:五种CSS选择器类型.
CSS commands are usually grouped in the curly braces to make a set of rules. Following are the various ways available to attach these set of rules with HTML code.
Selector (in simple words) means how you name these set of rules.
1 CLASS SelectORS
Class selectors is the simplest form of selectors where you assign your own meaningful name to the set of CSS rules. To create a class selector you simply need to write name of the class followed by a period.
(A class name cannot start with a number or a symbol as it is not supported by various browsers.)
For example,
Selector (in simple words) means how you name these set of rules.
1 CLASS SelectORS
Class selectors is the simplest form of selectors where you assign your own meaningful name to the set of CSS rules. To create a class selector you simply need to write name of the class followed by a period.
(A class name cannot start with a number or a symbol as it is not supported by various browsers.)
For example,
p.big { font-weight:bold; font-size:12px; }
.center { text-align:center; }
And this HTML :
.center { text-align:center; }
And this HTML :
<p class="big"> This paragraph will be rendered bold. www.Aiyiweb.Com</p>
You can apply more than one class to a given element.
And this HTML:
You can apply more than one class to a given element.
And this HTML:
<p class="center big"> This paragraph will be rendered bold. </p>
In the above example .big and .center are name of CSS classes and these classes are applied to P tag in HTML.
If class name is followed by HTML element in your CSS code like p.big in above example it means that this class will work on P tag only.
Otherwise you can apply the CSS class on any element.
It’s a good practice to add HTML element before class name in CSS if you are writing CSS rules for a particular element (It adds more clarity to CSS code.
2 ID SelectORS
ID selectors work like class selectors, except that they can only be used on one element per page because they work with ID of the html element. The id selector is defined as id of the HTML element followed by a # symbol.
For example,
In the above example .big and .center are name of CSS classes and these classes are applied to P tag in HTML.
If class name is followed by HTML element in your CSS code like p.big in above example it means that this class will work on P tag only.
Otherwise you can apply the CSS class on any element.
It’s a good practice to add HTML element before class name in CSS if you are writing CSS rules for a particular element (It adds more clarity to CSS code.
2 ID SelectORS
ID selectors work like class selectors, except that they can only be used on one element per page because they work with ID of the html element. The id selector is defined as id of the HTML element followed by a # symbol.
For example,
p#navigation { width:12em; color:#666; font-weight:bold; }
And this HTML :
And this HTML :
<p id="navigation"> This paragraph will be rendered bold. www.Aiyiweb.Com</p>
As a good practice ID selectors must be used if you are writing the CSS code for a single HTML element only.
As a good practice ID selectors must be used if you are writing the CSS code for a single HTML element only.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
