A difference id selector and selector classable
| Selector |
Beginning in CSS |
HTML tags can bind several |
Can be repeated |
use |
| id selector |
# |
Only a |
Can not be repeated (a tag only one) |
Under normal circumstances is to use JS, except under special circumstances to set the style with |
| class selector |
. |
It may be more |
Can be repeated (many relationship) |
Designed to set the style |
Second, the selector tips can save hundreds of lines of code
Optimistic about the question: do a web page
"I am a good person" (color: red; Format: Times New Roman)
"I am a student" (color: green; Format: Times New Roman)
"I am a bad person" (color: red; Format: italics)
Normal code is: is in accordance to write a paragraph
The benefits are clear and know what each piece of the set, without disturbing each other, but too much redundant code.
We need to convert ideas, attribute-centric, first set up, go in with the label, you can save the code.
{.D1 Color: Red; font-Family: Arial; } .D2 { Color: Green; font-Family: Arial; } .d3 { Color: Red; font-Family: italics; } ...... omitted Code ...... < the p- class = "d1" > I am a good person </ the p- > < the p- class = "D2" > I am a student </ the p- > < the p- class = "D3" > I am a bad person </ the p- >
We improve the code: the same show, which is for class properties (multi-label can be multiple class selectors) applications, otherwise we are all with the id selector is not the same, once the big website development, involving text images is huge, define good format, with pictures to text
{.color_red Color: Red; } .color_green { Color: Green; } .ff_songti { font-Family: Arial; } .ff_kaiti { font-Family: italics; } ...... ...... omitted Code < the p- class = "COLOR_RED ff_songti" > I am a good person </ the p- > < the p- class = "COLOR_GREEN ff_songti" > I am a student </ the p- > < the p- class = "COLOR_RED ff_kaiti" >I'm a bad person </p>
Second, the descendant selectors
1. Definitions: find all descendants of the specified tag and set the tag attribute. Use shall be: there will be thousands of thousands of companies to develop labels, so one by one to write class or id exhausted, so div came into being.
2. Format:
Label attribute {Attribute 2 1 tag
attributes:
value; }
3. meanings: first find the name of the label is called the name of the label 1, and then to find all this under the label name tag name tag 2, and then set the property
4. Note:
(1) descendant selectors must be separated by spaces
P {div Color: Red; } .......... omitted codes ........ < P > I, paragraphs 1 </ P > < div > < P > I red 1 </ the p- > < the p- > I am a red 2 </ the p- > </ div >
(2) the offspring not only his son, but also grandchildren / great-grandson etc.
P {div Color: Red; } .......... omitted codes ...... < div > < UL > < Li > < P > grandson tag p, try </ P > </ li > </ ul > </ div >
(3) descendant selectors can not only use the tag name, you can also use other selectors (this property more scalable, on behalf of the following div bunch of various labels have unified format, style selectors are there so just to ease our the burden of coding can fit a variety of scenarios to find the optimal solution)
A id example:
#test1 p{ color:blue; } ..........省略代码...... <div id="test1" class="test2"> <p>我是红的1</p> <p>我是红的2</p> </div>
另一个class的例子：
.test2{ color:green; } ..........省略代码...... <div id="test1" class="test2"> <p>我是红的1</p> <p>我是红的2</p> </div>
（4）div标签里面的标签也可以使用id，class属性也都能搭配
格式：只演示id的，class的把#换成.就行了
#div的id名称 #div里面的标签的id名称｛
属性：名称；
｝
（5）div标签可以向下无限延伸
格式：
div ul li p{
属性：值：
｝
例如：
div ul li p{ color:red; } </style> </head> <body> <p>我是段落1</p> <div id="test1" class="test2"> <p>我是红的1</p> <p>我是红的2</p> <ul> <li><p>重孙子标签p，试一试</p></li> </ul> </div>
二、源码：
d70_id_selector&class_selector
d71_posterity_selector
地址:
https://github.com/ruigege66/HTML_learning/tree/master
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包
